动画：创建元素时淡入，删除元素时淡出

Question

我遇到了以下情况的麻烦。我有一个按钮，其作用类似于普通的切换开关。当我单击“动画”按钮时，我希望<p>This is new Div</p>当我再次单击该按钮时淡入Animate，它<p>应该淡出。我怎样才能实现这个目标？const main = document.getElementById('main');const btn = document.getElementById('btn');let show = false;btn.addEventListener('click', () => {  if(show) {    const newDiv = document.getElementById("new-div");    newDiv.remove();    show = false;  } else {    const newDiv = document.createElement('div');    newDiv.id = "new-div";    newDiv.innerHTML = "<p>This is new Div</p>";    main.appendChild(newDiv);    show = true;  }})#new-div {  transition: all 2s ease-in-out;}<div id="main">  <button id="btn">Animate</button></div>我实际上正在构建一个画廊布局应用程序，它需要在单击图像时淡入+全屏显示，然后在单击时淡出到其原始位置。由于会有很多图像，我想使用JS来动态处理这个问题。迄今为止最大的障碍是实施fade-out，因为该元素正在被删除。

Answer 1

根据您的信息，我制作了一个改进的版本，请参阅下面的小提琴和代码： https: //jsfiddle.net/Kenvdb/8nsbp16o/

JavaScript：

const main = document.getElementById('main');

const btn = document.getElementById('btn');

let toggledDiv = null;

btn.addEventListener('click', () => {

  if (!toggledDiv) {

    show();

  } else {

    hide();

  }

})

const show = () => {

  toggledDiv = document.createElement('div');

  toggledDiv.id = "content";

  toggledDiv.style.opacity = "1";

  toggledDiv.innerHTML = "<p>This is new Div</p>";

  main.appendChild(toggledDiv);

}

const hide = () => {

  toggledDiv.style.animation = "fade-out 0.5s ease-in";

  toggledDiv.style.opacity = "0";

  toggledDiv.addEventListener('animationend', remove);

  toggledDiv.addEventListener('webkitAnimationEnd', remove);

}

const remove = () => {

  toggledDiv.remove();

  toggledDiv = null;

};

CSS：

#content {

  opacity: 0;

  animation: fade-in 0.5s ease-in;

}

@keyframes fade-in {

    0% { opacity: 0; }

    100% { opacity: 1; }

}

@keyframes fade-out {

    0% { opacity: 1; }

    100% { opacity: 0; }

}

HTML：

<div id="main">

  <button id="btn">Animate</button>

</div>

Answer 2

您需要先将不透明度设置为 0。然后您可以应用关键帧动画。否则，该元素没有任何可从中进行转换的元素。

见下文。

#new-div {

  opacity: 1;

  animation: fadeIn 2s ease-in-out;

}

@keyframes fadeIn {

  from {

    opacity: 0;

  }

}

Answer 3

有几种方法可以做到这一点。您可以使用以下属性设置新添加元素的不透明度style：

const main = document.getElementById('main');

const btn = document.getElementById('btn');

let show = false;

let fading = false;

btn.addEventListener('click', () => {

  if (fading) return;

  if (show) {

    const newDiv = document.getElementById("new-div");

    newDiv.style = "opacity: 0"; // start the fade

    fading = true;

    window.setTimeout(function() {

      fading = false; // disable showing/hiding while fading

      newDiv.remove(); // remove after fade completed

      show = false;

    }, 2000);

  } else {

    show = true;

    const newDiv = document.createElement('div');

    newDiv.id = "new-div";

    newDiv.innerHTML = "<p>This is new Div</p>";

    main.appendChild(newDiv);

    window.setTimeout(function() {

      newDiv.style = "opacity: 1"; // Start fading after a minimal time

    });

  }

})

#new-div {

  transition: all 2s ease-in-out;

  opacity: 0;

}

<div id="main">

  <button id="btn">Animate</button>

</div>

或者您可以使用 jQuery，这会显着减少代码：

$("#btn").on('click', () => {

  var newDiv = $("#new-div");

  if (newDiv.length) {

    newDiv.stop().fadeOut(2000, function() {

      newDiv.remove();

    });

  } else {

    $(`<div id='new-div'>

       <p>This is new Div</p>

       </div`).appendTo("#main").hide().fadeIn(2000);

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main">

  <button id="btn">Animate</button>

</div>

Answer 4

您可以简单地使用jQuery 中的fadeIn()和fadeOut()方法来完成此操作。

这是一个例子：

let alreadyClicked = false;

$("#btn").click(function() {

   if(alreadyClicked == false) {

      $("p").remove(); //Remove the paragraph if already created.

      $("#main").append("<p style='display: none;'>Hello, world!</p>"); //Create a paragraph.

      $("p").fadeIn(); //Show it by fading it in.

      alreadyClicked = true;

   } else {

      $("p").fadeOut();  //Fade it out

      alreadyClicked = false;

   }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main">

  <button id="btn">Animate</button>

</div>