动画显示块以显示无 - CSS

Question

显示无显示块动画正在工作 但我也需要动画以这种方式工作 - 动画显示块不显示

当操作从块变为"显示无"时，动画不起作用

知道可能是什么问题吗？

#dboldDiv,#dbnewDiv {
animation: anim .4s ease-in-out;
}
@keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}

Answer 1

显示不是可动画属性

---

有两类属性可动画和不可动画

您可以从此处查看动画属性列表：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Answer 2

display:none

不会顺利工作。 对于流畅的消失，请尝试使用visibility:hidden，或者如果只保持 0 不透明度并添加pointer-events:none，这样对象就不会捕获任何鼠标事件。

document.getElementById('hide').addEventListener('click', function(){
document.getElementById('link').className = 'hide';
});
document.getElementById('show').addEventListener('click', function(){
document.getElementById('link').className = 'show';
});
document.getElementById('link').addEventListener('click', function(){
alert('clicked');
});

#link {
display:block;
}
#link.show {
animation: anim1 .4s;
animation-fill-mode: forwards;
}
#link.hide {
animation: anim2 .4s;
animation-fill-mode: forwards;
animation-direction: reverse;
}
@keyframes anim1 {
0% {
opacity: 0.3;
pointer-events:none;
}
100% {
opacity: 1;
pointer-events:all;
}
}
@keyframes anim2 {
0% {
opacity: 0.3;
pointer-events:none;
}
100% {
opacity: 1;
pointer-events:all;
}
}

<button id="hide">Hide</button>
<button id="show">Show</button>
<a href="#" id="link">hidding &amp; showing</a>