CSS transition doesn't work after Javascript
Question
I've got a script that adds an animation to elements with their individual offsets so they fade in one by one.
/*eslint-env es6*/
$(document).ready(function(){
const selectCategory = document.getElementsByClassName("home-select-category-icon");
for (var i = 0; i < selectCategory.length; i++) {
selectCategory[i].style.animation = `fadeInCategory 2s ease-out ${ i/2+1 }s 1 forwards`;
}
});
I also have some css that expands the scale of the element when you mouse over it (using:hover), and i added a transition in css too.
After everything has faded in, the transition works for a short amount of time, before it returning to no transition and the transition between the scaled and non scaled element is snappy.
I want to have a transition between the scaled element and the non scaled element, but after every fade inanimation is finished, there is no transition whatsoever.
I've looked all over to find answers and I'm stuck, I've spent ages searching to find answers and none of them seem to work for me.
Any help is appreciated, thanks a lot
1 answers
solution1
3 ACCPTED 2020-06-08 17:53:18
I think you should keep your animation and transition effects on separate elements. Adding them to the same element ( .home-select-category-icon in your case) will cause issues because the will override each other if you are animating the same property, like transform .
In my comment I said you can replace the transform with margin-top in your fade in animation, which would work... but I think its better to just keep them separate - even if that means creating a wrapping div or span just for animation purposes.
In your case I would move your hover transition to your .home-select-category element.
So add this:
.home-select-category {
-webkit-transition:all 5s;
}
.home-select-category:hover {
-webkit-transform: scale(1.2);
}
and then remove those styles from the .home-select-category-icon styles.
Demo:
/*eslint-env es6*/ $(document).ready(function(){ const selectCategory = document.getElementsByClassName("home-select-category-icon"); for (var i = 0; i < selectCategory.length; i++) { selectCategory[i].style.animation = `fadeInCategory 2s ease-out ${ i/2+1 }s 1 forwards`; } });
html{ height: 100%; width: 100%; } #home-select-div{ -webkit-animation: 2s ease-out 0s 1 d; } @-webkit-keyframes fadeInCategory{ 0% {opacity: 0; -webkit-transform: translateY(-30px);} 60% {-webkit-transform: translateY(0px);} 100% {opacity: 1;} } @-webkit-keyframes fadeInTitle{ 0%{opacity: 0;} 100%{opacity: 1;} } html body #fb-spacer{ height:100%; } *{ margin: none; padding: none; } body{ height: 100%; width: 100%; background: #121212; } #fb-spacer{ height: 100%; width:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #home-welcome{ font-family: "Muli", sans-serif; color: white; opacity: 0; text-transform: uppercase; letter-spacing: 20px; padding: 100px 0px; -webkit-animation: fadeInTitle 1.5s ease-in 0s 1 forwards; } #home-select-div{ width:80%; display: flex; flex-direction: row; justify-content: space-between; }.home-select-category-icon{ background: none; border: none; outline: none; padding: 0px 50px; opacity: 0; }.home-select-icon{ color: white; font-size: 100px; }.home-select-category-subtitle{ color: white; text-transform: uppercase; letter-spacing: 5px; font-size: 24px; font-family: "Muli", sans-serif; }.home-select-category { -webkit-transition:all 5s; }.home-select-category:hover { -webkit-transform: scale(1.2); }
<,DOCTYPE html> <,-- _ _ | | | | _ __ ___ ___ __| |_ _| | ___ | '_ ` _ \ / _ \ / _` | | | | |/ _ \ | | | | | | (_) | (_| | |_| | | (_) | |_| |_| |_|\___/ \__:_|\__._|_|\___/ --> <html lang="en"> <head> <meta charset="utf-8"> <title>Modulo HTPC</title> <link href="https.//fonts?googleapis:com/css2.family=Muli:wght@300&display=swap" rel="stylesheet"> <link href="home.css" rel="stylesheet"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery:min.js"></script> <script src="https.//kit.fontawesome.com/efa620f8a0.js" crossorigin="anonymous"></script> <script async src="home.js"></script> </head> <body> <div id="fb-spacer"> <div id="home-welcome"> <h1>Welcome back</h1> </div> <div id="home-select-div"> <button class="home-select-category-icon"> <div id="home-select-game" class="home-select-category"> <i class="fas fa-gamepad home-select-icon"></i> <p class="home-select-category-subtitle">Gaming</p> </div> </button> <button class="home-select-category-icon"> <div id="home-select-movie" class="home-select-category"> <i class="fas fa-video home-select-icon"></i> <p class="home-select-category-subtitle">Movie</p> </div> </button> <button class="home-select-category-icon"> <div id="home-select-music" class="home-select-category"> <i class="fas fa-music home-select-icon"></i> <p class="home-select-category-subtitle">Music</p> </div> </button> <button class="home-select-category-icon"> <div id="home-select-exit" class="home-select-category"> <i class="fas fa-sign-out-alt home-select-icon"></i> <p class="home-select-category-subtitle">Exit</p> </div> </button> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.