Question

我正在尝试让我的代码播放一个动画（一个单词在消失之前落到页面底部），当一个鼠标悬停在一个类div中的一个单词上，然后它就会消失。

CSS'可见性属性'允许我选择单词是否可见，但在处理'class：hover'时，就像我一样，当鼠标悬停在单词的位置上时，单词会返回。与'display：none'相同;

当JavaScript（document.getElementById（“myP”）。style.visibility =“hidden”;）在onmouseover的帮助下应用时，单词将在不播放CSS动画的情况下消失。 有没有办法让单词执行动画，然后让它从页面中消失？

我无法向您展示我当前的代码，因为我很快就会在最终项目中使用它。我会提供一个概述：

   <style>
   .word:hover{
        /*This makes the words fall to the bottom of the screen.*/
        -webkit-animation-name: fallDown; 
        -webkit-animation-duration: 6s; 
        animation-name: fallDown;
        animation-duration: 6s;
    }

    #1{
    position: absolute;
    left: 200px;
    top: 200px;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes fallDown {
        0%   {animation-timing-function: ease-in;}
        100% {top:97%; display: none;}
    }
    /* Standard syntax */
    @keyframes fallDown {
        0%   {animation-timing-function: ease-in;}
        100% {top:97%; display: none;}
    }


    </style>
    </head>

    <body>
    <div class="word" id="1"> Falling </div>
    </body>

如果您有任何想法，请告诉我。

Answer 1

您需要animationend - Event reference，当CSS动画完成时会触发它。

$('.word').hover( function(){
    $(this).addClass('animated').on('animationend webkitAnimationEnd', function(){ 
    $(this).hide();
  });
});

这是css

.animated {
    -webkit-animation: fallDown 6s;
    animation: fallDown 6s;

}

DEMO（使用整页模式查看）

$('.word').hover( function(){
    $(this).addClass('animated').on('animationend webkitAnimationEnd', function(){ 
    $(this).hide();
  });
});

/* Chrome, Safari, Opera */
@-webkit-keyframes fallDown {
    to {top:97%; display: none;}
}
/* Standard syntax */
@keyframes fallDown {
    to {top:97%; display: none;}
}
.word{
    position: absolute;
    left: 200px;
    top: 200px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    }
.animated {
    -webkit-animation: fallDown 6s;
    animation: fallDown 6s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word"> Falling </div>

在鼠标悬停期间执行CSS动画后，我想让一个单词消失

1 个答案: