Question

我隐藏了#foo元素，我需要使用zoomIn css动画显示它（将opacity:0中的元素带到opacity:1。

这是我正在使用的代码：

CSS

#foo {
  opacity: 0;
  ...
}

// Zoom In animation
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation: zoomIn .2s ease-in-out 0s both;
}

JS

$(document).ready(function() {
    $("#foo").addClass("zoomIn");
});

使用上面的代码，我看到了动画，然后#foo元素再次消失。它不包含opacity:1。怎么解决呢？

Answer 1

你需要定义动画结束时发生的事情，这可以通过动画填充模式的“前进”属性来完成，这需要动画结束（不能以50％结束，必须结束）在100％或从 - 到）所以改变：

.zoomIn {
    animation: zoomIn .2s ease-in-out 0s both;
}

为：

.zoomIn {
     animation: zoomIn .2s ease-in-out 0s forwards;
}

通过使用两者，你说元素应该使用向前和向后，其中向前是动画的“结束”，向后是动画的“开始”。因此，你会有不透明度：0和不透明度：1，显然向后值是两者中较强的一个。

Answer 2

关于关键帧

作为Slugge帖子的补充，我想知道你为什么要在50%结束你的动画。我认为你应该在100%结束它（特别是如果你希望opacity留在1）。或者代替0% {} 100% {}，您可以使用from {} to {}。

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  100% {
    opacity: 1;
  }
}

关于其他解决方案

我认为定义一个transition和一个＆＃34;活跃的＆＃34;会更容易而不是使用关键帧。

#foo {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#foo.active {
  transform: scale3d(.3, .3, .3);
  opacity: 1;
}

然后

$(document).ready(function() {
    $("#foo").addClass("active");
});

您可以添加过渡 transform以及transition: opacity 0.2s ease-out, transform 0.2s ease-out;或transition: all 0.2s ease-out;

祝你好运＆＃39;

显示具有不透明度动画的隐藏元素

2 个答案: