我想让一个词在鼠标悬停期间执行 CSS 动画后消失
Posted
技术标签:
【中文标题】我想让一个词在鼠标悬停期间执行 CSS 动画后消失【英文标题】：I want to make a word disappear after it performs a CSS animation during a mouseover 【发布时间】：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/… 【参考方案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 动画后消失的主要内容，如果未能解决你的问题，请参考以下文章