[譯] 使用 CSS transitions（MDN）

時間 2019-12-05

標籤使用 css transitions mdn 欄目 CSS 简体版

原文原文鏈接

始發於個人博客 ryougifujino.com，歡迎訪問留言。javascript

CSS transitions 提供了一種在改變CSS屬性時控制動畫速度的方法。你可讓某個屬性在一段時間裏逐漸改變，而不是猛地突變。例如，若是你想把顏色從白色變爲黑色，一般這個變化是忽然地。而利用CSS transitions，這個變化能夠發生在一段時間裏，而且遵循一個加速曲線，全部的這一切都是可定製的。css

涉及在兩個狀態之間過渡的動畫被稱爲隱式過渡（ implicit transitions），由於在開始和結束狀態之間的狀態是由瀏覽器隱式定義的。html

CSS transitions 讓你自行決定對哪些屬性產生動畫（經過顯式地把它們列出來），動畫什麼時候發生（經過設置delay），過渡持續多久（經過設置duration），和過渡如何執行（經過定義一個timing function，例如，線性的或者先快後慢的）。java

哪些 CSS 屬性能夠被過渡？

網頁做者能夠定義哪些屬性須要執行和以何種方式執行動畫。這能夠建立很是複雜的過渡。因爲某些屬性執行動畫是沒有意義的，因此可執行動畫的屬性被限制在了一個有限集之中。web

注意：可執行動畫的屬性會隨着規範的發展而變化。瀏覽器

auto 這個值一般來講是很是複雜的。規範推薦在定義動畫時，不要在開始（from）和結束（to）中使用auto。（The specification recommends not animating from and to auto.）一些基於Gecko的UA，現實了這個需求，而另外一些基於WebKit的UA則沒有很嚴格地實現。因此在動畫裏使用auto可能會致使不可預測的結果，根據瀏覽器和它們的版本而定，這種狀況應該被避免。app

定義 transitions

CSS Transitions 是由簡寫屬性transition所控制的。這是配置過渡的最佳方式，由於這樣的方式能夠更容易地避免參數上的不一樣步（這種不一樣步會很讓人泄氣，而且不得不花大量的時間在CSS裏debug）。函數

你可使用如下子屬性來控制過渡的各個部分：工具

（注意這些無限循環的過渡只是出於舉例的目的；這些CSS transition 只是讓一個屬性從開始到結束的變化可視化了。若是你須要循環的可視化，請查看CSS animation屬性。）字體

`transition-property`

指定一個或多個CSS屬性的名字，這些屬性將會被應用過渡效果。只有被列在此處的屬性會在過渡中產生動畫效果；其餘屬性的變化仍是像往常同樣馬上發生。

`transition-duration`

給過渡指定時長。你能夠指定一個時長給全部會產生過渡效果的屬性，也能夠指定多個值，讓每一個屬性都擁有不一樣的過渡時長。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style> .parent { width: 200px; height: 200px; border: 1px solid black; position: relative; } .box { width: 20px; height: 20px; left: 0; top: 0; background: lightblue; position: absolute; transition-property: width height left top background; transition-duration: 1s; } .box1 { width: 50px; height: 50px; left: 100px; top: 100px; background: lightgreen; position: absolute; transition-property: width height left top background; transition-duration: 1s; } </style>
</head>
<body>
<div class="parent">
    <div class="box"></div>
</div>
<script> function updateTransition() { let el = document.querySelector('div.box'); if (el) { el.className = 'box1'; } else { el = document.querySelector('div.box1'); el.className = 'box'; } } setInterval(updateTransition, 1000); </script>
</body>
</html>
複製代碼

`transition-timing-function`

指定一個函數來定義屬性的中間值是如何計算的。Timing function 決定了過渡的中間值是如何計算的。大多數的 timing function 均可以經過相應函數的圖像來指定，如四點定義的貝塞爾曲線圖像。你也能夠從緩動函數備忘單中選擇緩動效果（easing）。

`transition-delay`

定義在屬性改變和過渡真正開始以前等待多久。

縮寫語法

transition: <property> <duration> <timing-function> <delay>;
複製代碼

例子

簡單例子

這個例子執行一個4秒的字體大小過渡和一個2秒的用戶鼠標放到元素之上和動畫效果然正開始之間的延遲。

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}
複製代碼

多個將會產生動畫效果的屬性的例子

CSS 內容

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
複製代碼

這個盒子結合了width, height, background-color, transform 四種屬性的過渡。

當屬性值列表長度不一時

當任何屬性的值列表比其餘屬性更短時，它的值將會不斷重複來讓使得它們匹配。例如：

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
複製代碼

等同於：

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}
複製代碼

一樣的，若是任何屬性值列表比transition-property的值列表更長，那麼它將被截取，因此若是你有以下CSS：

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}
複製代碼

這會被解釋爲如下內容：

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}
複製代碼

在高亮菜單時使用`transition`

有一個常見的CSS用例：當用戶的鼠標懸停在菜單裏的某一項時，這一項會高亮。咱們可使用transition來讓這個效果變得更有吸引力。

在咱們看代碼片斷以前，你可能想看看 live demo（假定你的瀏覽器支持transition）。

首先，咱們設置菜單所要用到的HTML：

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact Us</a>
  <a href="#">Links</a>
</nav>
複製代碼

而後咱們建立CSS來實現咱們菜單的外表和感受。相關的片斷以下：

a {
  color: #fff;
  background-color: #333;
  transition: all 1s ease-out;
}

a:hover,
a:focus {
  color: #333;
  background-color: #fff;
}
複製代碼

這個CSS建立了菜單的外表，而且背景和文字顏色都會在它的元素處於:hover和:focus狀態時變化。

JavaScript 的例子

在以下狀況以後當即使用transition應當特別當心：

用.appendChild()將元素添加到DOM中。
刪除元素的display: none;屬性。

這些狀況下，初始狀態會好像從未發生，而且元素老是處於它最後的狀態。克服這些限制的最簡單方式就是在你打算改變應用過渡效果的屬性的時候，使用window.setTimeout()設置一個合適的時間來延遲執行。

利用`transition`讓 JavaScript 效果更平滑

transition是一個可使得事物變得更加平滑的好工具，這並不須要對你的 JavaScript 作任何事情。看看下面的例子。

<p>Click anywhere to move the ball</p>
<div id="foo"></div>
複製代碼

利用 JavaScript 你能夠作出讓小球移動到點擊位置的中間的效果：

var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
},false);
複製代碼

利用CSS你可讓這一過程更加平滑並且不須要任何額外的 JavaScript 工做。僅僅對元素添加一個transition，一切將會變得絲滑。

p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}
複製代碼

你能夠在這裏找到demo。

檢測`transition`的開始和結束

你可使用transitioned事件來檢測一段動畫是否結束。這是一個TransitionEvent對象，它在典型的Event對象基礎上新添了兩個額外的屬性：

propertyName
一個字符串，指示告終束了過渡效果的CSS屬性的名稱。

elapsedTime 一個浮點數，指示了過渡從事件開始時已經運行了的秒數。這個值不被transition-delay所影響。

一般，你可使用addEventListener()方法來監聽這個事件：

el.addEventListener("transitionend", updateTransition, true);
複製代碼

你還能夠用transitionrun（在任何延遲以前觸發）和transitionstart（在任何延遲以後觸發）來檢測transition的開始：

el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);
複製代碼

注意：若是transition在transition完成以前被取消，那麼transitionend 事件不會被觸發。這是由於在這種狀況下要麼這個元素被設置爲了display: none，要麼動畫屬性的值被改變了。

原文地址（MDN）更新於Mar 23, 2019, 8:15:15 PM。部分live demo不能連接過來，請前往原文進行查看。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

[譯] 使用 CSS transitions（MDN）

哪些 CSS 屬性能夠被過渡？

定義 transitions

transition-property

transition-duration

transition-timing-function

transition-delay