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

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:&nbsp;//jsfiddle.net/Kenvdb/8nsbp16o/JavaScript：const main = document.getElementById('main');const btn = document.getElementById('btn');let toggledDiv = null;btn.addEventListener('click', () => {&nbsp; if (!toggledDiv) {&nbsp; &nbsp; show();&nbsp; } else {&nbsp; &nbsp; hide();&nbsp; }})const show = () => {&nbsp; toggledDiv = document.createElement('div');&nbsp; toggledDiv.id = "content";&nbsp; toggledDiv.style.opacity = "1";&nbsp; toggledDiv.innerHTML = "<p>This is new Div</p>";&nbsp; main.appendChild(toggledDiv);}const hide = () => {&nbsp; toggledDiv.style.animation = "fade-out 0.5s ease-in";&nbsp; toggledDiv.style.opacity = "0";&nbsp; toggledDiv.addEventListener('animationend', remove);&nbsp; toggledDiv.addEventListener('webkitAnimationEnd', remove);}const remove = () => {&nbsp; toggledDiv.remove();&nbsp; toggledDiv = null;};CSS：#content {&nbsp; opacity: 0;&nbsp; animation: fade-in 0.5s ease-in;}@keyframes fade-in {&nbsp; &nbsp; 0% { opacity: 0; }&nbsp; &nbsp; 100% { opacity: 1; }}@keyframes fade-out {&nbsp; &nbsp; 0% { opacity: 1; }&nbsp; &nbsp; 100% { opacity: 0; }}HTML：<div id="main">&nbsp; <button id="btn">Animate</button></div>

Answer 2

您需要先将不透明度设置为 0。然后您可以应用关键帧动画。否则，该元素没有任何可从中进行转换的元素。见下文。#new-div {&nbsp; opacity: 1;&nbsp; animation: fadeIn 2s ease-in-out;}@keyframes fadeIn {&nbsp; from {&nbsp; &nbsp; opacity: 0;&nbsp; }}

Answer 3

有几种方法可以做到这一点。您可以使用以下属性设置新添加元素的不透明度style：const main = document.getElementById('main');const btn = document.getElementById('btn');let show = false;let fading = false;btn.addEventListener('click', () => {&nbsp; if (fading) return;&nbsp; if (show) {&nbsp; &nbsp; const newDiv = document.getElementById("new-div");&nbsp; &nbsp; newDiv.style = "opacity: 0"; // start the fade&nbsp; &nbsp; fading = true;&nbsp; &nbsp; window.setTimeout(function() {&nbsp; &nbsp; &nbsp; fading = false; // disable showing/hiding while fading&nbsp; &nbsp; &nbsp; newDiv.remove(); // remove after fade completed&nbsp; &nbsp; &nbsp; show = false;&nbsp; &nbsp; }, 2000);&nbsp; } else {&nbsp; &nbsp; show = true;&nbsp; &nbsp; const newDiv = document.createElement('div');&nbsp; &nbsp; newDiv.id = "new-div";&nbsp; &nbsp; newDiv.innerHTML = "<p>This is new Div</p>";&nbsp; &nbsp; main.appendChild(newDiv);&nbsp; &nbsp; window.setTimeout(function() {&nbsp; &nbsp; &nbsp; newDiv.style = "opacity: 1"; // Start fading after a minimal time&nbsp; &nbsp; });&nbsp; }})#new-div {&nbsp; transition: all 2s ease-in-out;&nbsp; opacity: 0;}<div id="main">&nbsp; <button id="btn">Animate</button></div>或者您可以使用 jQuery，这会显着减少代码：$("#btn").on('click', () => {&nbsp; var newDiv = $("#new-div");&nbsp; if (newDiv.length) {&nbsp; &nbsp; newDiv.stop().fadeOut(2000, function() {&nbsp; &nbsp; &nbsp; newDiv.remove();&nbsp; &nbsp; });&nbsp; } else {&nbsp; &nbsp; $(`<div id='new-div'>&nbsp; &nbsp; &nbsp; &nbsp;<p>This is new Div</p>&nbsp; &nbsp; &nbsp; &nbsp;</div`).appendTo("#main").hide().fadeIn(2000);&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="main">&nbsp; <button id="btn">Animate</button></div>

Answer 4

您可以简单地使用jQuery 中的fadeIn()和fadeOut()方法来完成此操作。这是一个例子：let alreadyClicked = false;$("#btn").click(function() {&nbsp; &nbsp;if(alreadyClicked == false) {&nbsp; &nbsp; &nbsp; $("p").remove(); //Remove the paragraph if already created.&nbsp; &nbsp; &nbsp; $("#main").append("<p style='display: none;'>Hello, world!</p>"); //Create a paragraph.&nbsp; &nbsp; &nbsp; $("p").fadeIn(); //Show it by fading it in.&nbsp; &nbsp; &nbsp; alreadyClicked = true;&nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; $("p").fadeOut();&nbsp; //Fade it out&nbsp; &nbsp; &nbsp; alreadyClicked = false;&nbsp; &nbsp;}});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="main">&nbsp; <button id="btn">Animate</button></div>