I have a problem. My menue should "slide" from left to right, so I have wrote some CSS:
.animate-in {
animation-name: menue-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.animate-out {
animation-name: menue-out;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes menue-in {
from { transform: translateX(-100%);}
to { transform: translateX(0%);}
}
@keyframes menue-out {
from { transform: translateX(0%);}
to { transform: translateX(-100%);}
}
The Keyframe which is called "menue-in" to move the menue from left to right works fine BUT my keyframe "menus-out" doesn't...
Could somebody help me please?
Here is my JS Code...
"use strict";
document.addEventListener("DOMContentLoaded", function() {
let toggle = document.getElementsByClassName("toggle")[0];
let navigation = document.getElementsByClassName("navigation__mobile")[0];
let showing = false;
toggle.addEventListener("click", function() {
navigation.classList.toggle("d-flex");
if(showing == false) {
navigation.classList.remove("animate-out");
navigation.classList.add("animate-in");
showing = true;
}
else {
navigation.classList.remove("animate-in");
navigation.classList.add("animate-out");
showing = false;
}
})
})
It seems you're looking for animation-fill-mode: forwards; to stop the animation at last frame.
Here's a snippet for your case.
Enjoy. :)
"use strict";
document.addEventListener("DOMContentLoaded", function() {
let toggle = document.getElementsByClassName("toggle")[0];
let navigation = document.getElementsByClassName("navigation__mobile")[0];
let showing = false;
toggle.addEventListener("click", function() {
navigation.classList.toggle("d-flex");
if(showing == false) {
navigation.classList.remove("animate-out");
navigation.classList.add("animate-in");
showing = true;
}
else {
navigation.classList.remove("animate-in");
navigation.classList.add("animate-out");
showing = false;
}
})
}).animate-in {
animation-name: menue-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.animate-out {
animation-name: menue-out;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes menue-in {
from { transform: translateX(-100%);}
to { transform: translateX(0%);}
}
@keyframes menue-out {
from { transform: translateX(0%);}
to { transform: translateX(-100%);}
}
.navigation__mobile {
width: 200px;
height: 400px;
background: red;
transform: translateX(-100%);
}<button class="toggle">click</button>
<div class="navigation__mobile">
navaigation
</div>You are missing the animation-fill-mode property here. So If you will not use this property then the element will come to the original/default position.
But we do not want that so here you can use the animation-mode-fill: forwards property so that element can retain its last position.
Here is the updated css code:
.animate-in {
animation-name: menue-in;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.animate-out {
animation-name: menue-out;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes menue-in {
from { transform: translateX(-100%);}
to { transform: translateX(0%);}
}
@keyframes menue-out {
from { transform: translateX(0%);}
to { transform: translateX(-100%);}
}