John
  • 643

CSS3实现伪类hover离开时平滑过渡效果

 阅读约 8 分钟

由于hover伪类添加的动画效果,仅当鼠标放在元素上时会被触发,而当鼠标离开时,效果会中断,会显得很生硬。
大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦,CSS3便可以帮你解决这些问题。

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>离开时效果生硬</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border:1px solid;
    
                margin:0px auto;
                margin-top: 200px;
            }
            div:hover{
                transform: scale(2);
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

由于div元素只有在:hover伪类触发的时候,效果才能加到div元素上。

当鼠标离开div元素的时候,:hover伪类将不再生效,瞬间丢掉hover里写的动画效果。

此时,我们应当在原本元素上再写一个一模一样的transition效果,将离开断掉的动画效果续接上。

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>简单解决</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border:1px solid;
    
                margin:0px auto;
                margin-top: 200px;
    
                /* 在原本元素上再加一个transition */
                transition: all 1s linear;
            }
            div:hover{
                transform: scale(2);
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

此时,不管鼠标在什么时候离开元素,都会原样返回。

但此时会有一个问题,鼠标放上去,立马离开,或者鼠标从上边匀速划过,div回到原样的时间,依旧是1s。

其实,我们在hover里写的transition:all 1s linear完全是多余的。

transition有一个特性,只要是带有数值类型的属性(例如:% , rgba() , rgb() , hsla() , 数字等),在其发生变化的时候,均会被触发动画效果。

因此,不管:hover伪类什么时候丢掉我的动画,也不管我:hover时,元素动画走到了什么地步。只要元素本身带有transitioin,该动画便会从当前动画执行到的地方,以相同的时间返回原样。


<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>简单解决</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border:1px solid;
    
                margin:0px auto;
                margin-top: 200px;
    
                /* 在此处留一个transition就够了 */
                transition: all 1s linear;
            }
            div:hover{
                transform: scale(2);
                 /* 去掉这个tansition */
                /* transition:  all 1s linear; */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

这只是最简单的动画实现,但对于目前大部分需求来说,配合配合贝塞尔曲线,已经足够用了。

你仅仅需要做到,hover中的最终样式,保证为数值样式变OK了。

像display:block变为display:none就不好使了,此时我们可以用visibilty:1变为visibilty:0,同样也可以简单实现显示到隐藏的效果。

另外加一句,不太清楚transition属性的可以自行去百度去,transition-timing-function属性定义的速度曲线,使用cubic-bezier贝塞尔曲线,可以做到很多效果,大家可以上这个网址去试一试贝塞尔曲线实现的动画

阅读 18.9k更新于 2017-08-13

推荐阅读
前端经验分享
用户专栏

每天抽一点儿时间分享一点儿前端经验

16 人关注
13 篇文章
专栏主页
目录