jquery - CSS显示:inline animation not working using jquery addClass

Question

这是代码笔:https://codepen.io/iggPen/pen/QMVyrp

如果您注意到，有两个动画:reveal-sandwich 和 large-expansion。我无法让 reveal-sandwich 动画正常工作。

这是 jquery:

$('.button').click(function(){
  $('.container').addClass('animate_sandwich');
  $(this).addClass('large-expansion');
})

这个想法是当我点击一个按钮时，它会给 .container 和 .button 动画。我希望容器显示(display: inline;)。但是，当我单击该按钮时，它没有显示。我知道我可以在没有动画的情况下实现同样的目标。我可以将 display: inline 放在 .animate_sandwich 类中，但我计划除了 display: inline 之外添加更多动画，它是我必须通过动画让它发挥作用。

我做错了什么？

Answer 1

display 属性无法设置动画。要获得您想要的效果，您可以为 opacity 属性设置动画:

.container {
  position: absolute;
  background: $sandwich_container;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: 50%;
  left: 25%;
  transform: translateX(-50%) translateY(-50%);
  display: inline;
  opacity: 0;
}

.animate_sandwich {
  animation: reveal-sandwich 1s ease-out 1 forwards;
}

@keyframes reveal-sandwich {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 1;}
}

CodePen