CSS过渡在Javascript后不工作

问题描述 投票:1回答:1

我有一个脚本,可以给元素添加一个动画,让它们一个一个地淡出,我也有一些css,当你把鼠标放在它上面时,可以扩大元素的比例(使用:hover),我也用css添加了一个过渡。

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

当所有的东西都淡入后,过渡期工作了很短的时间,然后又恢复到没有过渡期的状态,而且缩放元素和非缩放元素之间的过渡也很迅速。

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

我找遍了所有的地方都没有找到答案,我被卡住了,我花了好久的时间来寻找答案,但似乎都不适合我。

下面是我代码的链接

任何帮助,非常感谢

javascript html css transition
1个回答
3
投票

我认为你应该保留你的 animationtransition 的效果。将它们添加到同一个元素上(.home-select-category-icon 在你的例子中)会引起问题,因为如果你在动画同一个属性,它们会互相覆盖,比如说 transform.

在我的评论中,我说你可以替换 transformmargin-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>
© www.soinside.com 2019 - 2024. All rights reserved.