Question

我正在尝试让一个元素缓慢退出而另一个元素同样缓慢地进入，但我希望第一个元素快速进入而第二个元素也快速退出。这可能吗？这是我尝试过的。这是用于deck.js幻灯片集。

.slide.long.in {
    -webkit-transition: -webkit-transform 5000ms ease-in;
    transition: transform 5000ms ease-in;
    transition: transform 500ms ease-out;
}
.slide.long.out {
    -webkit-transition: -webkit-transform 5000ms ease-out;
    transition: transform 500ms ease-in;
    transition: transform 5000ms ease-out;
}

Answer 1

Deck.js有javascript函数可以更改某个部分的类，如果它是previous，current或next。使用Imgonzalves提示，我添加了以下类，它似乎工作。

> .slide.long.in.deck-current {
    -webkit-transition: -webkit-transform 5000ms ease-in;
    transition: transform 2500ms ease-in;
}
> .slide.long.in.deck-next {
  -webkit-transition: -webkit-transform 500ms ease-out;
  transition: transform 500ms ease-out;
}
> .slide.long.in.deck-previous {
  -webkit-transition: -webkit-transform 500ms ease-out;
  transition: transform 500ms ease-out;
}
> .slide.long.out.deck-current {
    -webkit-transition: -webkit-transform 5000ms ease-out;
    transition: transform 500ms ease-out;
}
> .slide.long.out.deck-next {
    -webkit-transition: -webkit-transform 500ms ease-out;
    transition: transform 500ms ease-out;
}
> .slide.long.out.deck-previous {
    -webkit-transition: -webkit-transform 500ms ease-out;
    transition: transform 5000ms ease-out;
}

缓入和缓出可以为css转换计时功能提供不同的速度吗？

1 个答案: