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

时间 2019-11-09

标签 css3 css 实现 hover 离开平滑过渡效果栏目 CSS 繁體版

原文原文链接

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

<!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元素上。html

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

此时，咱们应当在本来元素上再写一个如出一辙的transition效果，将离开断掉的动画效果续接上。ui

<!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>

此时，无论鼠标在何时离开元素，都会原样返回。code

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

其实，咱们在hover里写的transition:all 1s linear彻底是多余的。htm

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

所以，无论: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>

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

你仅仅须要作到，hover中的最终样式，保证为数值样式变OK了。

像display:block变为display:none就很差使了，此时咱们能够用visibilty:1变为visibilty:0，一样也能够简单实现显示到隐藏的效果。

另外加一句，不太清楚transition属性的能够自行去百度去，transition-timing-function属性定义的速度曲线，使用cubic-bezier贝塞尔曲线，能够作到不少效果，你们能够上这个网址去试一试贝塞尔曲线实现的动画。