Могут ли замедления и замедления иметь разные скорости для функции синхронизации перехода 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;
}
Другие вопросы по тегам