我想在click事件中删除div元素,但我希望通过淡出效果将其删除。我有一些JQuery解决方案,但我需要纯JavaScript或CSS解决方案。
document.querySelector('.list').addEventListener("click", function(e){
if (e.target.localName === "span") {
var removeTarget = e.target.parentNode.parentNode;
removeTarget.parentNode.removeChild(removeTarget);
};
});
此代码删除div元素无效。如何添加淡出效果?
有两种方法可以实现此目的:CSS3动画或jQuery动画。
在您的CSS文档中,添加:
.list {
opacity: 1;
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
}
将JavaScript的第4行更改为:
removeTarget.style.opacity = '0';
setTimeout(function(){removeTarget.parentNode.removeChild(removeTarget);}, 1000);
注意:确保CSS3转换的时间和setTimeout相同。
获取jQuery
将JavaScript的第4行更改为:
removeTarget.fadeOut(1000)
我已经为个人项目使用了此功能:
function removeFadeOut( el, speed ) {
var seconds = speed/1000;
el.style.transition = "opacity "+seconds+"s ease";
el.style.opacity = 0;
setTimeout(function() {
el.parentNode.removeChild(el);
}, speed);
}
removeFadeOut(document.getElementById('test'), 2000);
只需转到jQuery源代码,取出纯JavaScript中的fade
代码,然后使用它,无需重新发明轮子,
或提示是使用setTimeInterval()
将div的高度缓慢减小到0
或css解决方案将使用transform
和transition
属性
这是一个很好的问题,但是要为html中的某些元素设置动画,该元素必须在进行动画处理时存在。因此,您有一些方法可以执行此操作,一个好方法是使用CSS隐藏此元素,然后在动画后删除该元素。隐藏时可以设置动画,可以看到以下示例:
<style>
.hide{
opacity: 0;
}
.fade-out {
transition:1s linear all;
}
</style>
<span class="list fade-out">
This is a List, click me to hide
</span>
<script>
document.querySelector('.list').addEventListener("click", function(e) {
if (e.target.localName === "span") {
//Add CSS hide and animate with fade out
var currentCSS = this.className;
this.className = currentCSS + ' hide';
var removeTarget = e.target.parentNode.parentNode;
setTimeout(function(){
removeTarget.parentNode.removeChild(removeTarget);
},1000);
};
});
</script>
使用elem.className =“ my-animation”将以下CSS类添加到元素中;点击:
.my-animation {
animation: fade 3s steps(90) forwards;
-webkit-animation: fade 3s steps(90) forwards;
-moz-animation: fade 3s steps(90) forwards;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.0;
}
}
您也可以通过修改步长(数字)来控制动画的速度。
在2020年,您可以将setTimeout
用作the animation end event,而无需在两个地方维护持续时间:
.fade-out {
animation: fade 2s;
-webkit-animation: fade 2s;
-moz-animation: fade 2s;
}
/* Animate opacity */
@keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
@-moz-keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
@-webkit-keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
const elementToFade = document.getElementById('my-element');
elementToFade.onanimationend = (e) => {
if (e.srcElement.classList.contains('fade-out')) {
elementToFade.parentNode.removeChild(elementToFade);
}
};
// To fade away:
elementToFade.classList.add('fade-out');