【前端Talkking】CSS系列-一步一步带你认识transition过渡效果

时间 2019-11-06

标签前端Talkking css 系列一步认识 transition 过渡效果栏目 CSS 繁體版

原文原文链接

一、前言

transition从网页效果上来看是一种平滑过渡的动画，本质上是在必定的时间内将属性的状态从初始值过渡到结束值。若是不添加transition过渡，在网页中点击鼠标、得到焦点等操做将致使css的值在瞬间完成，看起来比较生硬，而添加了过渡效果，能够实现平滑的过渡，增长用户体验。 javascript

在使用的使用须要加浏览器前缀：css

-webkit-transition
-moz-transition
-o-transition

过渡transition是一个复合属性，包括：html

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

transition-property：过渡属性（默认值为all）
transition-duration：过渡持续时间（默认值为0s）
transition-timing-function：过渡函数（默认值为ease函数）
transition-delay过渡延迟时间（默认值为0s）

二、transition属性介绍

2.1 过渡属性transition-property

transition-property: none | all | <transition-property>[,<transition-property>]*
默认值：all

*表示0次或屡次，也就是说transition-property后面能够跟多个属性，属性之间以逗号分隔。若是有多个属性过渡，可使用all代替全部的属性名，表示全部的属性都将得到过渡效果。<span style="font-weight:bold">这里须要指出并非全部的属性都能过渡，只有可以数字量化的CSS属性才能过渡，好比颜色系列（color、background-color、border-color）、数字系列（width、height、line-height）、01系列(opacity、visibility)</span>。W3C上列出了全部的过渡属性列表java

2.2 过渡持续时间transition-duration

transition-duration:<time>[,<time>]*
默认值:0s，表示马上变化。

整个过渡状态完成须要的时间。单位能够指定秒，也能够指定毫秒。web

有了transition-property和transition-duration的介绍，咱们来看一个简单的例子：该实例使用的hover的时候，背景颜色由#69c编程red，而且过渡时间为3s。编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡效果</title>
    <style>
        #block{
            width: 400px;
            height: 400px;
            background-color: #69c;
            margin: 0 auto;
            -webkit-transition: background-color 3s;
        }
        #block:hover{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="block"></div>
</body>
</html>

网页的过渡效果以下所示： segmentfault

2.3 过渡延迟时间transition-delay

transition-delay:<time>[,<time>]*
默认值:0s，表示不延迟

延迟过渡开始的时间。能够为正数，也能够为负数。若是为正数秒，则表示正数秒后才开始过渡。负数的状况能够参考这篇文章。浏览器

下面的例子中，将过渡时间设置为1s，过渡延迟时间设置的3s，能够看到当鼠标挪上去与离开过了3秒后背景颜色才开始过渡，而且过渡的时间为1s。微信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡效果</title>
    <style>
        #block{
            width: 200px;
            height: 200px;
            background-color: #69c;
            margin: 0 auto;
            -webkit-transition: background-color 1s 3s;
        }
        #block:hover{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="block"></div>
</body>
</html>

当hover时过渡完成时，默认会恢复到最初的状态。这里有一个小技巧，若是不想恢复到最初的状态，能够将transition-delay的值设定为很大，示例中将该值设置为999999s，大概为12天，对于用户浏览器窗口来说，已是足够长，这个时间范围内不会恢复到最初的状态，所以能够认为这种过渡是不可逆的，便是永久的。app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="forever"></div>
</body>
</html>

<style>
    .forever{
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: deeppink;
        transition: all 1s linear 999999s;
    }
    .forever:hover{
        transform: scale(2);
        transition: all 1s ease-in-out;
    }
</style>

从上面的示例能够获得最终的效果，当鼠标hover结束的时候，图片仍然保持在放大后的尺寸。具体缘由是：回到原尺寸的过渡延迟时间设置的很大，用户的浏览器窗口不可能一直保持不关，现实的状况等于永久性过渡。

2.4 过渡时间函数transition-timing-function

transition-timing-function:<timing-function>[,<timing-function>]*
默认值:ease
可选值:ease/linear/ease-in/ease-out/ease-in-out

ease 缓慢开始，缓慢结束（默认）
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始，缓慢结束（和ease稍有区别，差异并不大）
linear 匀速

以上四个参数的变化曲线能够用下图表示：

实际的效果以下图所示，动画依次对应ease、ease-in、ease-out、ease-in-out以及linear的动画效果：

cubic-bezier 贝塞尔曲线。（x1,y1,x2,y2）四个值对应于曲线上的P1和P2点，而且必须在[0,1]区域内，不然无效。

steps 支持两个参数，第一个是分割的数量，第二个参数可选关键字start、end（默认）。例如，steps(4, start)等价于step-start(4)、steps(4,end)等价于step-end(4)

关于cubic-bezier和steps两个过渡时间函数，后面写相关的文章详细讨论。

三、过渡触发的方式

通常地，过渡transition的触发方式有三种，分别是伪类触发、媒体查询触发@media和Javascript事件触发。其中，常见的伪类触发有:hover、:focus、:active、:checked等。

1.hover:鼠标悬停触发。在文章的上面有例子讲解。
2.active:用户点击元素并按住鼠标时触发

<div class="active-demo"></div>

.active-demo{
        display: block;
        width: 100px;
        height: 100px;
        margin-top: 10px;
        border-radius: 5px;
        padding: 10px;
        text-align: center;
        background-color: deeppink;
        transition: all 3s ease;
    }
.active-demo:active{
    background-color: blue;
    width: 500px;
}

网页中的效果以下所示：

3.focus(得到焦点时触发)

<div class="wrapper">
    <input type="text" class="input-demo" placeholder="我有焦点时，将边长">
</div>

input{
    outline: none;
}
.wrapper{
    position: relative;
    width: 500px;
    height: 50px;
    padding: 5px;
    background-color: #f0f3f9;
}
.input-demo{
    position: absolute;
    right: 0;
    width: 200px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #555;
    background-color: #fff;
    border-image: none;
    border: 2px solid blue;
    border-radius: 4px;
    transition: width 3s linear;
}
.input-demo:focus{
    width: 400px;
    border-image: none;
    border: 2px solid gold;
}

咱们对input进行绝对定位，并改变focus时它的宽度，就能够模拟出segmentfault顶部搜索框的效果。效果以下：

4.checked:

<div class="wrapper">
    <input type="checkbox" class="checkbox" id="checkbox">
    <label class="label" for="checkbox">复选框</label>
</div>

.checkbox{
    transition: all 3s ease;
}
.label{
    color: #1b1b1b;
    transition: all 3s ease;
}
.checkbox:checked + .label{
    color: deeppink;
    font-size: 20px;
    font-weight: 700;
}

在这个例子中经过checked的时候，改变label标签字体的大小和颜色。效果以下：

5.点击事件，例如添加删除等操做

<div class="box">click</div>

.box{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background-color: deeppink;
    transition: all 3s ease;
}
.box.clicked{
    width: 200px;
    height: 200px;
    background-color: blue;
}

$(".box").click(function () {
    $(this).toggleClass('clicked');
})

这个例子中，当点击鼠标的时候，改变容器的背景颜色和大小。效果图以下：

6.改变浏览器窗口大小触发@media

<div class="media">media</div>

.media {
    margin-top: 10px;
    width: 200px;
    height: 200px;
    border-radius: 5px;
    background: deeppink;
    color: white;
    text-align: center;
    transition: all 1s ease;
}

@media only screen and (max-width : 960px) {
    .media {
        width: 100px;
        height: 100px;
    }
}

这个例子中经过改变浏览器窗口的大小，来实现media容器的宽度和高度的渐变。

四、过渡transition结束事件

因为过渡涉及到一个过渡时间，在过渡完成的时候会触发transitionend事件，。兼容Chrome、Firefox、Safari、IE10+。具体用法以下：

element.addEventListener('transitionend', callback, false);

html

<div id="end" class="end">transitionEnd</div>

css

.end{
        width: 120px;
        height: 120px;
        background-color: deeppink;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        transition: all 3s ease;
    }
    .end:hover{
        width: 200px;
        height: 200px;
        background-color: blue;
    }

javacript

document.getElementById('end').addEventListener("transitionend", function (e) {
        e = e || event;
        document.getElementById('end').innerHTML = 'propertyName:'  + e.propertyName
            + '; elapsedTime:' + e.elapsedTime + '; pseudoElement:' + e.pseudoElement;
    });

效果以下：

可是transitionend事件比较坑，经过e.propertyName获取到的过渡属性不完整，好比文中示例，过渡的属性有width、height以及background-color，可是经过e.propertyName得到过渡属性只有height。

五、写在最后

关于transition过渡属性就介绍到这里，还有不少细节问题没有介绍到，你们能够再看看W3C上的介绍。相信到这里，你能够写一个用户友好的过渡效果了。
感谢您的阅读！在这样的一个浮躁的年代里，可以认真看到这里已是对做者最大的确定。欢迎你们关注个人微信公众号。
圣诞节了，祝福您和您的家人一切都好！