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

I want to make a word disappear after it performs a CSS animation during a mouseover

本文关键字：悬停 执行 CSS 消失 动画 鼠标 一个      更新时间：2023-09-26

我试图让我的代码播放动画(一个词下降到页面的底部消失之前)，当鼠标悬停在类div中的一个词，然后有它消失的好。

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

当JavaScript (document.getElementById("myP").style。在onmouseover的帮助下应用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>

如果你有什么想法请告诉我。

你需要animationend - Event引用，它在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>

相关文章：