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

【问题标题】：I want to make a word disappear after it performs a CSS animation during a mouseover我想让一个词在鼠标悬停期间执行 CSS 动画后消失
【发布时间】：2015-07-30 17:42:15
【问题描述】：

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

CSS 'visibility property' 允许我选择单词是否可见，但是当像我一样处理 'class:hover' 时，当鼠标没有悬停在单词的位置上时，单词会返回。与“显示：无”相同；

当在 onmouseover 的帮助下应用 JavaScript (document.getElementById("myP").style.visibility = "hidden";) 时，单词会消失而不播放 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>

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

【问题讨论】：

不仅使用纯 CSS，还可以使用 JavaScript - jonsuh.com/blog/…

标签： javascript css animation hover visibility

【解决方案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>

【讨论】：