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>

动画显示块不显示任何内容-CSS

2 个答案: