Плавно переходить взад и вперед только с одним классом анимации?

Question

Я хочу использовать один класс для запуска анимации и после удаления этого класса повторить эту анимацию в обратном порядке.

Трудно представить себе, поэтому я создал CodePen of where I'm at currently.

Вы заметите, что когда .zoom удаляется из #box, то #box просто исчезает. Это не делает анимацию в обратном направлении, что в конечном итоге является целью.

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

Answer 1

Попробуйте добавить .zoomoutclass, css анимации, используя .removeClass(), второй class на .toggleClass()

window.onclick = function() { 
 
    if (!$("#box").is(".zoom")) { 
 
    $("#box").removeClass("zoomout") 
 
     .toggleClass("zoom"); 
 
    } else { 
 
    $("#box").toggleClass("zoom zoomout"); 
 
    } 
 
};

#box { 
 
    width: 256px; 
 
    height: 256px; 
 
    background: black; 
 
    opacity: 0; 
 
    display: block; 
 
    transform: scale(1.15, 1.15); 
 
    margin: 16px 0px; 
 
} 
 
.zoom { 
 
    animation: zoom 500ms; 
 
    animation-fill-mode: both; 
 
    -moz-animation: zoom 500ms; 
 
    -moz-animation-fill-mode: both; 
 
    -webkit-animation: zoom 500ms; 
 
    -webkit-animation-fill-mode: both; 
 
} 
 
.zoomout { 
 
    animation: zoomout 500ms; 
 
    animation-fill-mode: both; 
 
    -moz-animation: zoomout 500ms; 
 
    -moz-animation-fill-mode: both; 
 
    -webkit-animation: zoomout 500ms; 
 
    -webkit-animation-fill-mode: both; 
 
} 
 
@keyframes zoom { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(1.15); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
} 
 
@-moz-keyframes zoom { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(1.15); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes zoom { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(1.15); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
} 
 
@keyframes zoomout { 
 
    0% { 
 
    opacity: 1; 
 
    transform: scale(1.15); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(1); 
 
    } 
 
} 
 
@-moz-keyframes zoomout { 
 
    0% { 
 
    opacity: 1; 
 
    transform: scale(1.15); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes zoomout { 
 
    0% { 
 
    opacity: 1; 
 
    transform: scale(1.15); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(1); 
 
    } 
 
} 
 
body { 
 
    margin: 0; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -60%); 
 
    -moz-transform: translate(-50%, -60%); 
 
    -webkit-transform: translate(-50%, -60%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="box"></div> 
 
Click the document to toggle the box.

codepen http://codepen.io/anon/pen/vOxxKE