Question

以下是codepen：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;}
}

CodePen

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;}
}

CSS显示：使用jquery addClass无法使用内联动画

2 个答案: