Question

如果创建一些带有转换的简单规则：

.foo {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .3s ease;
}
.foo.is-hidden {
    opacity: 0;
    top: -9999;
    left: -9999;
}

我正在使用js动态添加和删除is-hidden类。

<div class="foo"> ----＆gt; <div class="foo is-hidden">

当我这样做时，我希望在绝对位置将其从屏幕上翻转之前，发生不透明度转换。

这可以通过过渡完成吗？或者我以某种方式利用关键帧动画？我以前没做过这样的事情？

Answer 1

您可以将transition-delay与过渡结合使用：

.foo {
  transition: opacity 1s ease, top 1s, left 1s;
  transition-delay: 0s, 1s, 1s;
}

在我的小提琴中，我将不透明度设置为0.5，这样你就可以看到效果：

<强> http://jsfiddle.net/5knxvkc0/

控制属性转换发生的顺序？

1 个答案: