7

В этом примере все достаточно очевидно и отрабатывает правильно

$('div').click(function() {
  $('div').toggleClass('wide');
});
div {
  width: 80px;
  height: 30px;
  background-color: green;
  transition: all 0.4s ease-in-out;
}
.wide {
  width: 140px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

Но мне необходимо усложнить анимацию, как это сделать правильно? При добавлении keyframes анимация отрабатывает только при добавлении класса, а при удалении все происходит без анимации.

$('div').click(function() {
  $('div').toggleClass('wide');
});
div {
  width: 80px;
  height: 30px;
  background-color: green;
  transition: all 0.4s ease-in-out;
}
@keyframes blue {
  50% {
    background-color: blue;
  }
  100% {
    width: 200px;
    background-color: blue;
  }
}
.wide {
  animation-name: blue;
  animation-duration: 0.4s;
  animation-fill-mode: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

Как мне необходимо организовать код, чтобы анимация по клику отрабатывала "в обе стороны"?

2 ответа 2

5

Анимации (animation), в отличие от переходов (transition), работают только в одну сторону. Переключение направления нормально не поддерживается.

Вообще-то существует свойство animation-direction, но оно не поможет, потому что, если имя анимации не меняется, то элемент продолжает "проигрывать" одну и ту же последовательность. Если изменить направление, то анимация будет всё ещё в завершённом состоянии, и просто изменится конечное значение, которое браузер и применит моментально. И удаление имени анимации animation-name не поможет, потому что в этом случае сбросится и конечное значение, что вас не устроит (animation-fill-mode у вас both). Что касается переходов, то они существуют отдельно от анимаций, анимировать одни и те же свойства двумя способами бессмысленно, а свойства переходов на анимации не влияют.

Если хотите анимировать в обе стороны, то нужно использовать или анимации с двумя отдельными @keyframes для каждого направления, или переходы, которые поддерживают изменение направления.

См. также:

1

Можно указывать несколько transition'ов через запятую, а также сдвигать их начало:

$('div').click(function() {
  $('div').toggleClass('wide');
});
div {
  width: 80px;
  height: 30px;
  background-color: green;
  transition: width 4s ease-in-out, background-color 2s ease-in-out;
  transition-delay: 0s, 2s;
}

.wide {
  width: 380px;
  background-color: blue;
  transition-delay: 0s;
}

section {
  height: 10px;
  border-left: 80px silver solid;
  border-right: 150px silver solid;
  background-color: red;
  width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<section></section>
<div style="transition-timing-function:linear"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.