这是代码笔: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
之外添加更多动画,它是我必须通过动画让它发挥作用。
我做错了什么?
最佳答案
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;}
}
关于jquery - CSS显示:inline animation not working using jquery addClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45889586/