Javascript 后 CSS 过渡不起作用答案

【问题标题】：CSS transition doesn't work after JavascriptJavascript 后 CSS 过渡不起作用
【发布时间】：2020-06-08 16:59:16
【问题描述】：

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

/*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 中添加了一个过渡。

在一切都淡入之后，过渡会工作很短的时间，然后它会返回无过渡，并且缩放元素和非缩放元素之间的过渡非常流畅。

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

我到处寻找答案，但我被困住了，我花了很长时间寻找答案，但似乎没有一个对我有用。

Here's the link to my code

感谢任何帮助，非常感谢

【问题讨论】：

在您的问题中不清楚所需的输出是什么？
@AtulRajput 对此感到抱歉，我对表达感到震惊。我更新了我的问题
我认为这是因为您的 css 动画和悬停过渡都与 transform 属性混淆。尝试将您的 fadeInCategory css 动画（删除转换）更新为 margin-top: -30px @ 0% 和 margin-top: 0 @ 60% ，看看是否可以获得更好的结果。 margin-top 也可能不是最好的替代品......也许top？

标签： javascript html css transition

【解决方案1】：

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

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

在您的情况下，我会将您的悬停过渡移动到您的 .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>

【讨论】：

非常感谢，这项工作完美无缺。我快要发疯了，哈哈