【前端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;
    });

效果以下：