CODEWITHSUNDEEP
javascriptcss
Alex
Alex

Reputation: 2072

JS \ CSS - images just popout or popin without animation

I'm trying to create fade in\out effects using JS\CSS playing with opacity property. Images just pop in or pop out without the desired effect. Can't figure out what am I doing wrong. jsfiddle. JS:

document.getElementById("in").addEventListener("click", function() {
  var img = document.createElement('img');
  img.src = "https://i1.sndcdn.com/artworks-000054045268-j4bv9x-large.jpg";
  img.setAttribute("id", "dt");
  document.getElementById("frame").appendChild(img);
  img.className = "fadein";
  console.log("sould fade in");
});

document.getElementById("out").addEventListener("click", function() {
  console.log("sould fade out");
  var img = document.getElementById("dt");
  img.className = "fadeout";
  console.log(img);
  img.remove();
});

CSS:

#frame img {
  opacity: 0;
  -moz-transition: opacity 2s;
  /* Firefox 4 */
  -webkit-transition: opacity 2s;
  /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: all 1s ease;
  width: 350px;
  margin: auto;
}

.fadein {
  opacity: 1 !important;
  transition: all 1s ease !important;
}

.fadeout {
  opacity: 0 !important;
}

HTML:

<div id="frame"></div>

<button id="in">fade in</button>
<button id="out">fade out</button>

Upvotes: 1

Views: 111

Answers (3)

prasanth
prasanth

Reputation: 22500

Place the create Element of img globel

var img = document.createElement('img');
  img.src = "https://i1.sndcdn.com/artworks-000054045268-j4bv9x-large.jpg";
  img.setAttribute("id", "dt");
  document.getElementById("frame").appendChild(img);
  
document.getElementById("in").addEventListener("click", function() {
   img.className = "fadein";
  console.log("sould fade in");
});

document.getElementById("out").addEventListener("click", function() {
  console.log("sould fade out");
 
  img.className = "fadeout";
 
  
  console.log(img);
  
});
#frame img {
  
  opacity: 0;
  -moz-transition: opacity 2s;
  /* Firefox 4 */
  -webkit-transition: opacity 2s;
  /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: all 1s ease;
  width: 350px;
  height:0;
  margin: auto;
}

.fadein {
 height:auto !important;
  opacity: 1 !important;
  transition: all 1s ease !important;
}

.fadeout {
 
  opacity: 0 !important;
}
<div id="frame"></div>

<button id="in">fade in</button>
<button id="out">fade out</button>

Upvotes: 0

Frederik Wessberg
Frederik Wessberg

Reputation: 201

When a new element is appended to the DOM, the browsers layout engine is busy computing dimensions and painting the element onto the view context. There must be a slight delay before assigning transitions to the element. So, if you wrap the CSS class assignment inside a setTimeout, you'll be fine. Like this:

document.getElementById("in").addEventListener("click", function() {
    var img = document.createElement('img');
    img.src = "https://i1.sndcdn.com/artworks-000054045268-j4bv9x-large.jpg";
    img.setAttribute("id", "dt");
    document.getElementById("frame").appendChild(img);
    setTimeout(() => img.className = "fadein", 100);
});

You might need to tweak the timeout value in the range [0, 100] depending on browser and horsepower of your host machine.

I see that you assign transition-property to all in your CSS. Please know that this is expensive as it forces the browser to optimize for possible transitions on all CSS properties on elements with the .fadeIn or .fadeOut CSS classes.

Upvotes: 1

mrid
mrid

Reputation: 5796

document.getElementById("in").addEventListener("click", function() {
  var img = document.createElement('img');
  img.src = "https://i1.sndcdn.com/artworks-000054045268-j4bv9x-large.jpg";
  img.setAttribute("id", "dt");
  document.getElementById("frame").appendChild(img);
  img.className = "fadein";
  console.log("sould fade in");
});


document.getElementById("out").addEventListener("click", function() {
  console.log("sould fade out");
  var img = document.getElementById("dt");
  img.className = "fadeout";
  console.log(img);
  img.remove();
});
#frame img {
  opacity: 0;
  -moz-transition: opacity 2s;
  /* Firefox 4 */
  -webkit-transition: opacity 2s;
  /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: all 1s ease;
  width: 350px;
  margin: auto;
}

.fadein {
  opacity: 1 !important;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
   	  animation-timing-function: ease-in;
  animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fadeout {
  opacity: 0 !important;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
   	  animation-timing-function: ease-in;
  animation-duration: 2s;
}
<div id="frame"></div>

<button id="in">fade in</button>
<button id="out">fade out</button>

Upvotes: 2

Related Questions