Могут ли замедления и замедления иметь разные скорости для функции синхронизации перехода CSS?
Я пытаюсь заставить один элемент выходить медленно, а другой входить так же медленно, но я хочу, чтобы первый элемент входил быстро, а второй тоже быстро выходил. Это возможно? Вот что я попробовал. Это для набора слайдов 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;
}
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;
}