CSS 轉換在 Javascript 之后不起作用
[英]CSS transition doesn't work after Javascript
問題描述
我有一個腳本，可以將 animation 添加到具有各自偏移量的元素中，以便它們一一淡入。
/*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`;
}
});
我還有一些 css，當您將鼠標懸停在元素上時（使用：懸停），它會擴展元素的比例，並且我也在 css 中添加了一個過渡。
在一切都淡入之后，過渡會工作很短的時間，然后它會返回無過渡，並且縮放元素和非縮放元素之間的過渡非常流暢。
我想在縮放元素和非縮放元素之間進行過渡，但是在每次淡入淡出動畫完成后，都沒有任何過渡。
我到處尋找答案，但我被困住了，我花了很長時間尋找答案，但似乎沒有一個對我有用。
任何幫助表示贊賞，非常感謝
1 個解決方案
解決方案1
3 已采納 2020-06-08 17:53:18
我認為您應該將animation和transition效果保留在單獨的元素上。 將它們添加到相同的元素（在您的情況下.home-select-category-icon ）會導致問題，因為如果您為相同的屬性設置動畫，它們將相互覆蓋，例如transform 。
在我的評論中，我說你可以在 animation 的淡入淡出中用margin-top替換transform ，這會起作用......但我認為最好將它們分開 - 即使這意味着僅為 animation 創建一個包裝 div 或 span目的。
在您的情況下，我會將您的 hover 轉換移動到您的.home-select-category元素。
所以添加這個：
.home-select-category {
-webkit-transition:all 5s;
}
.home-select-category:hover {
-webkit-transform: scale(1.2);
}
然后從.home-select-category-icon styles 中刪除那些 styles。
演示：
/*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>
javascript連續添加屬性時CSS過渡不起作用
[英]CSS transition doesn't work when javascript added properties continuous
Javascript 默認打開可折疊 css 過渡在第一次單擊時不起作用
[英]Javascript default open collapsible css transition doesn't work on first click
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.