Комбинация анимации и перехода не работает должным образом

Question

Я пытаюсь добавить некоторую базовую анимацию CSS3. Цель состоит в том, чтобы переключить класс на событие нажатия кнопки и анимировать div на основе добавленного класса. Код отлично работает для первой итерации переключения в Firefox, но для других браузеров, таких как Chrome, и для следующей итерации в Firefox преобразование превращается в мгновение ока. Пожалуйста, помогите мне разобраться, что происходит.

Отрывок:

$('button').click(function() { 
 
    $('div').toggleClass('clicked'); 
 
});

div { 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition-property: top, left; 
 
    transition-duration: 1s; 
 
    transition-timing-function: linear; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.clicked { 
 
    animation-name: clicked; 
 
    animation-duration: 1s; 
 
    animation-timing-function: linear; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes clicked { 
 
    0% { 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
    100% { 
 
    top: 100px; 
 
    left: 100px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Click Me!</button> 
 
<div></div>

я также подготовил скрипку here.

Answer 1

Это своего рода известного поведения с Chrome. Кажется, Firefox способен обрабатывать удаление анимации плавно с переходом, но Chrome этого не делает. Я видел это поведение раньше и в this thread.

Почему удаление анимации не работает с переходом в Chrome?

В то время как я не могу обеспечить 100% дурак доказательство объяснение того, почему это происходит, мы можем расшифровать его в какой-то степени на основе this HTML5Rocks article about Accelerated rendering in Chrome и this one about GPU accelerated compositing in Chrome.

Что-то похоже на то, что элемент получает свой собственный слой рендеринга, потому что на нем есть явное свойство позиции, установленное на нем. Когда слой (или его часть) становится недействительным из-за анимации, Chrome только перекраивает этот слой, на который влияет изменение. Когда вы открываете консоль разработчика Chrome, включите опцию «Показывать красящие объекты», вы увидите, что когда анимация происходит, Chrome только рисует фактический элемент, который становится анимированным.

Однако в начале и конце анимации происходит переименование всей страницы, которая немедленно возвращает элемент в исходное положение и тем самым отменяет поведение перехода.

$('button').click(function(){ 
 
    $('div').toggleClass('clicked'); 
 
});

div{ 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition-property: top, left; 
 
    transition-duration: 1s; 
 
    transition-timing-function: linear; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.clicked{ 
 
    animation-name: clicked; 
 
    animation-duration: 1s; 
 
    animation-timing-function: linear; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes clicked{ 
 
    0% {top: 0; left: 0;} 
 
    100% {top: 100px; left: 100px;} 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Click Me!</button> 
 
<div></div>

---

Что такое решение?

Поскольку ваше движение на самом деле является линейным движением из одного положения в другое, вы можете достичь его без необходимости в анимации. Все, что нам нужно сделать, это использовать преобразование translate и сдвинуть элемент на нужный номер. пикселей при включении класса. Поскольку существует переход, назначенный элементу через другой селектор, смещение произойдет линейным образом. Пока класс переключается, элемент возвращается в исходное положение снова линейным способом из-за перехода на элемент.

$('button').click(function() { 
 
    $('div').toggleClass('clicked'); 
 
});

div { 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition-property: transform; 
 
    transition-duration: 1s; 
 
    transition-timing-function: linear; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.clicked { 
 
    transform: translate(100px, 100px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<button type="button">Click Me!</button> 
 
<div></div>

Answer 2

Ожидаемое поведение. Вам нужно использовать две отдельные анимации или придерживаться только перехода.

переход является анимацией, только один, который выполняется между двумя различными состояниями - т.е. начальное состоянием и конечным состоянием. Как меню ящика , начальное состояние может быть открытым и конечное состояние может быть закрыто, или наоборот.

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

Это способ оживить элемент с переходом:

$('button').click(function() { 
 
    $('div').toggleClass('clicked'); 
 
});

div { 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    transition-property: top, left; 
 
    transition-duration: 1s; 
 
    transition-timing-function: linear; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.clicked { 
 
    top: 100px; 
 
    left: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Click Me!</button> 
 
<div></div>