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

我遇到以下情况的麻烦

我有一个按钮，就像一个正常的切换。当我点击“动画”按钮时，我希望

这是新的Div

淡入。当我再次点击

动画

按钮时，这个

应该淡出

我怎样才能做到这一点

const main=document.getElementById（'main'）；
const btn=document.getElementById（'btn'）；
让秀=假；
btn.addEventListener（'单击'，（）=>{
如果（显示）{
const newDiv=document.getElementById（“新div”）；
newDiv.remove（）；
show=false；
}否则{
const newDiv=document.createElement（'div'）；
newDiv.id=“new div”；
newDiv.innerHTML=“这是新的Div
”；
main.appendChild（newDiv）；
show=true；
}
})

#新分区{
过渡：所有2个易于输入输出；
}

使有生气

根据您的信息，我制作了一个改进版，请参见下面的小提琴和代码：

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;
};

HTML:

使有生气

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

见下文

#new-div {
  opacity: 1;
  animation: fadeIn 2s ease-in-out;

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

---

只需在jQuery中使用

fadeIn（）

和

fadeOut（）

两种方法即可 下面是一个例子：

让alreadyClicked=false；
$（“#btn”）。单击（函数（）{
如果（alreadyClicked==false）{
$（“p”）.remove（）；//删除已创建的段落。
$（“#main”）.append（
Hello，world！
”）//创建一个段落。
$（“p”）.fadeIn（）；//通过淡入显示它。
alreadyClicked=真；
}否则{
$（“p”）.fadeOut（）；//淡出
alreadyClicked=错误；
}
});

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


const main=document.getElementById（'main'）；
const btn=document.getElementById（'btn'）；
让秀=假；
让衰落=虚假；
btn.addEventListener（'单击'，（）=>{
如果（衰减）返回；
如果（显示）{
const newDiv=document.getElementById（“新div”）；
newDiv.style=“不透明度：0”//开始淡入淡出
褪色=真；
setTimeout（函数（）{
淡入=false；//淡入时禁用显示/隐藏
newDiv.remove（）；//淡入淡出完成后删除
show=false；
}, 2000);
}否则{
show=true；
const newDiv=document.createElement（'div'）；
newDiv.id=“new div”；
newDiv.innerHTML=“这是新的Div
”；
main.appendChild（newDiv）；
setTimeout（函数（）{
newDiv.style=“不透明：1”//在最短时间后开始褪色
});
}
})
#新分区{
过渡：所有2个易于输入输出；
不透明度：0；
}

使有生气
你的动画在哪里？这是否回答了你的问题@OmriAttiya，我想不出任何合适的动画，所以没有包括它。不，上面提到的问题并没有回答我的问题，我正在寻找
淡入
和
淡出
两种实现，因为所有转换都使用它。阅读更多有关转换及其工作方式的信息我已经找到了解决此问题的潜在解决方案：但是浏览器对
animationend
事件侦听器的支持是什么？我不明白sayshow是什么回答了这个问题？嘿，我实际上在构建一个gallary应用程序，它需要上面独特的问题陈述。我想通过JS添加和删除我的
div
，并在其中添加动画为什么要使用大型库来淡入/淡出div？@KennyDope jQuery是大型库吗？！是的，因为只有褪色，所以你应该总是考虑添加到HTTP请求的代码和大小。抱歉，我没有提到，我正在寻找香草JS答案。谢谢。@cdadityang你真的在找VanillaJS anwser吗？嘿，我已经找到了。现在的问题是如何实现
淡出
？由于元素被删除（请参阅我的JS代码），动画似乎不适用于淡出。您好，顺便说一句，在您的香草JS答案中，淡出动画只起作用。我需要的是两者-淡入淡出。提前感谢。我想在vanilla JS中实现这一点。我已经找到了解决此问题的潜在方法：，您能帮助我支持
animationend
事件侦听器吗？
<div id="main">
  <button id="btn">Animate</button>
</div>

#new-div {
  opacity: 1;
  animation: fadeIn 2s ease-in-out;

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}