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

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>