CSS显示：使用jQuery addClass

这里在线动画不工作是codepen：https://codepen.io/iggPen/pen/QMVyrp CSS显示：使用jQuery addClass

如果您发现，有两个动画：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之外添加更多的动画，我必须让它通过动画工作。

我做错了什么？

来源

2017-08-25 Iggy

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

来源

2017-08-25 21:28:47 ishegg

明白了。我从来不知道这一点。我猜这是有道理的，因为显示不接受数值 - 没有意义使'@keyframes'显示：none/inline/block /＆c'。谢谢！ – Iggy

很高兴能帮到你！这是一个很好看的汉堡顺便说一句:) – ishegg

谢谢！我的妻子在这个专营店工作，所以我想为她做些有趣的事情:) – Iggy

的问题是，你不能动画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;} 
}

来源

2017-08-25 21:29:06 Dekel

真棒，谢谢Dekel！ – Iggy

CSS显示：使用jQuery addClass

回答

相关问题