css - 缓入和缓出对于css过渡计时功能可以有不同的速度吗？

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 函数，可以更改部分上的类，如果它是上一个、当前或下一个。使用 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;
}