快速鼠标悬停/鼠标悬停的完整悬停动画持续时间?

Posted

技术标签:

【中文标题】快速鼠标悬停/鼠标悬停的完整悬停动画持续时间?【英文标题】:Full hover animation duration with quick mouseover/mouseout? 【发布时间】:2015-09-25 01:17:05 【问题描述】:

我对图像有悬停效果。如果您将鼠标悬停在它上面并用鼠标停留在那里,则转换将以给定的持续时间执行。

当你离开现场时,我也做了正确的过渡。

现在,我希望悬停过渡以给定的持续时间开始,无论您是否只是将鼠标悬停在图像上快速 1 毫秒。

这只能通过 javascript 实现吗?

.example  position: absolute;
             left: 0;
             height:320px;
             bottom: 0;
             width: 100%;
             background: #000;
             background-color: rgba(255, 255, 255, 0.4);
             opacity:0;
             -webkit-transition: background-color 2s ease-out;
             -moz-transition: background-color 2s ease-out;
             -o-transition: background-color 2s ease-out;
             -ms-transition: background-color 2s ease-out;

             transition: opacity 0.5s ease-in-out;
             -moz-transition: opacity 0.5s ease-in-out;
             -webkit-transition: opacity 0.5s ease-in-out;
             -o-transition: opacity 0.5s ease-in-out;
            -ms-transition: opacity 0.5s ease-in-out;
             transition: opacity 0.5s ease-in-out;
             text-align: center;
             line-height: 299px;
             text-decoration: none;
             color: #000000;
             font-size:30pt;
          

   .image:hover .example  background-color: rgba(255, 255, 255, 0.4);
                         -webkit-transition: background-color 0.5s  ease-in-out;
                         -moz-transition: background-color 0.5s  ease-in-out;
                         -o-transition: background-color 0.5s  ease-in-out;
                         -ms-transition: background-color 0.5s ease-in-out;
                         transition: background-color 0.5s ease-in-out;
                         -webkit-transition: opacity 0.5s  ease-in-out;
                         -moz-transition: opacity 0.5s  ease-in-out;
                         -o-transition: opacity 0.5s  ease-in-out;
                         -ms-transition: opacity 0.5s  ease-in-out;
                         transition: opacity 0.5s ease-in-out;
                         opacity:1;
                       

有了这个,如果我将鼠标悬停在图像上,我的文本和背景颜色就会出现动画,当我离开图像时,文本和背景颜色就会出现动画。它工作正常。 (尽管我上面的代码现在有点未排序)

所以,我想要的只是淡入淡出动画将完全执行,即使我只是快速将鼠标悬停在图像上并返回。

我觉得不可能吧? (我的意思是只有 css)

【问题讨论】:

【参考方案1】:

恐怕,您将不得不使用一点 Javascript,因为据我所知,没有 javascript 是不可能做到的。

在悬停时添加一个类,并在动画结束时将其删除。请参阅此答案以了解如何做到这一点 - css3 animation on :hover; force entire animation

PS:我会说这是一个评论,但我现在没有权限。

【讨论】:

OP 正试图弄清楚如何使用鼠标悬停(并且可能是鼠标悬停)来做到这一点。我修改了您发布的链接中的示例,以演示如何使用这些事件完成此操作:jsfiddle.net/ue6mvm51/2 谢谢@alex,我是否也应该将您的小提琴添加到答案中,以防人们想在该事件中尝试它? 我将再次解释:如果我将鼠标悬停,背景颜色会淡入,如果我没有鼠标悬停,则背景颜色会保持不变。如果我将鼠标移出,则 bg-color 会逐渐消失。这就是我的代码的现状。现在,我想要这样:如果我只是将鼠标悬停一毫秒,动画将只显示自身的 1 毫秒。我希望它仍然完全淡入并淡出。在第一个示例中,它几乎是我想要的部分效果。如果您将鼠标从左到右移动到所有框上。所有动画都得到完全执行。对不起,我的英语顺便说一句;) 所以,我的基本问题是是否可以不使用 javascript。我想我必须使用js触发mouseover和mouseout来淡入淡出bg-color。 我还是没有完全理解这个问题,你能不能创造一个小提琴并指出我们,这样我们就可以给你一个可行的解决方案。

以上是关于快速鼠标悬停/鼠标悬停的完整悬停动画持续时间?的主要内容,如果未能解决你的问题,请参考以下文章

悬停时启动旋转动画,但悬停时仍会完成

动画 div 悬停和鼠标离开延迟

JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法

如何在鼠标悬停在图像上时暂停动画

如何让 jquery 像 CSS 悬停一样悬停?

Jquery - 为啥我的图像不会在鼠标悬停时动画?