CSS 转换在 Javascript 后不起作用

Question

我有一个脚本，可以为元素添加动画，使其具有各自的偏移量，以便它们一个接一个地淡入。

/*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 可以在您将鼠标悬停在元素上时（使用 :hover）扩大元素的比例，我也在 css 中添加了一个过渡。

一切都淡入之后，过渡效果会持续一小段时间，然后返回到无过渡状态，缩放元素和非缩放元素之间的过渡很快。

我想在缩放元素和非缩放元素之间有一个过渡，但是在每个淡入淡出动画完成后，没有任何过渡。

我到处寻找答案，但我被卡住了，我花了很长时间寻找答案，none 似乎对我有用。

Here's the link to my code

感谢任何帮助，非常感谢

Answer 1

我认为您应该将 animation 和 transition 效果保留在单独的元素上。将它们添加到同一元素（.home-select-category-icon 在你的情况下）会导致问题，因为如果你正在为相同的属性设置动画，它们将相互覆盖，例如 transform.

在我的评论中，我说过您可以在淡入淡出的动画中将 transform 替换为 margin-top，这会起作用...但我认为最好将它们分开 - 即使这意味着创建一个环绕 div 或仅用于动画目的的跨度。

在你的情况下，我会将你的悬停过渡移动到你的 .home-select-category 元素。

所以添加这个：

.home-select-category {
   -webkit-transition:all 5s;
}

.home-select-category:hover {
   -webkit-transform: scale(1.2); 
}

然后从 .home-select-category-icon 样式中删除这些样式。

演示：

/*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>

CSS 转换在 Javascript 后不起作用

CSS transition doesn't work after Javascript

javascript

html

css

transition