Объединить несколько анимаций

Question

Я пытаюсь объединить несколько частей анимации вместе, нажав кнопку. Вот пример:

.element { 
    background-color: black; 
    display: block; 
    width: 160px; 
    height: 160px; 
    border-radius: 80%; 
} 
.one { 
    animation: one 1.5s ease 1 forwards; 
} 
.two { 
    animation: two 1s forwards; 
} 

@keyframes one { 
    from { 
    transform: scale(0.25); 
    opacity: 0； 
    } 
    25% { 
    opacity: 0.5; 
    } 
    to { 
    transform: scale(1); 
    opacity: 0.5; 
    } 
} 

@keyframes two { 
    from { 
    opacity: 0.5； 
    } 
    to { 
    opacity: 0; 
    } 
} 

Я пытаюсь объединить эти две анимации: один и два. Мой способ сделать это - использовать JS: classList.add('.two'), когда я нажал кнопку. Но проблема заключалась в следующем: на данный момент я добавил класс, элемент изменился на его непрозрачность по умолчанию, которая была 1.

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

Итак, мой вопрос в том, есть ли лучший способ сделать это?

Вот CodePen Demo

Я просто понял, проблему с этим: Если я начну вторую анимацию перед первыми один был закончен, будет разрыв (круг будет просто превращается в большой один все из неожиданность).

Демо-версию можно найти по вышеуказанной ссылке, спасибо!

Answer 1

Могу ли я объединить эти две анимации?

Я предполагаю, что по объему вы подразумеваете выступление вперед (при щелчке добавить анимацию) и обратную анимацию (при щелчке мышью), используя те же правила ключевого кадра. Этого можно достичь, но для этого и передняя, ​​и обратная анимация должна быть точно такой же (но в противоположных направлениях). Если это то же самое, мы можем использовать animation-direction: reverse для достижения обратного эффекта с теми же ключевыми кадрами.

Здесь передняя анимация имеет изменение transform, в то время как обратное не делает и, следовательно, добавление animation-direction: reverse не будет производить тот же эффект, что и исходный фрагмент. Более того, кодирование не так просто, как просто добавление свойства, необходимо много работы, как упомянуто here.

---

Что является причиной для двух других вопросов?

Причина возникновения проблем (то есть элемент, получающий opacity: 1 сразу после нажатия кнопки удаления, и элемент, получающий полный размер при нажатии кнопки удаления во время повторной анимации) все те же. Когда вы удаляете анимацию элемента (удаляя класс), он сразу же привязывается к размеру, указанному вне анимации.

В первом случае, размер является тот, который упоминается под .element (как .one удаляется) и его opacity по умолчанию 1, потому что нет opacity установки в нем. Во втором случае, когда удаляется .one и добавляется .two, анимация удаляется, поэтому размер элемента указан в .element, а opacity указан в .two (так как это позже в файле CSS).

---

Так что же еще есть альтернатива?

Если необходимы как прямые, так и обратные эффекты, и анимация не имеет промежуточных состояний (то есть есть только начальное состояние и конечное состояние), тогда лучше использовать переходы вместо анимаций. Причина в том, что переходы автоматически создают обратный эффект при удалении класса (в отличие от анимаций, где обратная анимация должна быть записана как отдельный ключевой кадр и добавлена ​​к элементу).

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

var theBut = document.getElementById('butt'); 
 
var theBut2 = document.getElementById('butt2'); 
 
theBut.addEventListener('click', function a() { 
 
    document.querySelector('.element').classList.add('one'); 
 
}); 
 

 
theBut2.addEventListener('click', function b() { 
 
    document.querySelector('.element').classList.remove('one'); 
 
});

.element { 
 
    background-color: #d91e57; 
 
    display: block; 
 
    width: 160px; 
 
    height: 160px; 
 
    border-radius: 90%; 
 
    transform: scale(0.25); 
 
    opacity: 0; 
 
    transition: opacity 2s, transform .1s 2s; 
 
} 
 
.one { 
 
    transform: scale(1); 
 
    opacity: 0.5; 
 
    transition: all 2s; 
 
}

<div class="element"> 
 
</div> 
 
<button id="butt">add animation</button> 
 
<button id='butt2'>remove animation</button>