CSS display:inline animation 无法使用 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;(。但是，当我单击该按钮时，它没有显示。 我知道我可以在没有animation的情况下实现同样的目标。我可以把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;}
}

代码笔

Answer 2

问题是您无法对display属性进行动画处理。

如果要对它进行动画处理，可以使用opacity：
https://codepen.io/anon/pen/brxeOX

这是对 css 的更改：

.container {
...
opacity: 0;
display: inline;
}

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