transition
、transform
和translate
這三者經常有人搞混,先把這三者做一個簡單解釋:
transform
是 轉換,指的是改變所在元素的外觀,它有很多種手段(轉換函數)來改變外觀,例如 位移、縮放、旋轉 等,而其中的位移的函數名就叫translate
,所以說,translate
是transform
的一部分。transition
是 過渡,指的是某個CSS屬性值如何平滑的進行改變,就是平常說的 動效。而transform
是沒有動畫效果,你改變了它的值,元素的樣子就唰的改變了。
transition 過渡
基本用法
好,接下來看一下transition
的基本用法:
transition: [屬性名] [持續時間] [速度曲線] [延遲時間];
我們可以很方便的用這個過渡來給某一個屬性加上好看的動效。例如,高度屬性的值改變時,延遲 0.5 秒後以 ease
曲線進行過渡,持續2秒:
transition: height 2s ease .5s;
或者一個屬性不夠,想要監聽所有屬性。
transition: all 2s ease .5s;
注意,這裏的所有屬性是指能進行動畫過渡的屬性,有很多屬性是不能進行過渡的,比如display
,你不能讓一個div
的顯示模式慢悠悠的發生過渡。
有了上面的認識時候搭配:hover
等可以引起屬性值變化的僞類時就可以很輕鬆的做出一個動畫效果:
.box {
width: 10px;
transition: width 0.4s ease;
}
.box:hover {
width: 50px;
}
給多個屬性指定同一個過渡
接下來深入一點,如果你想給多個屬性指定同一個過渡的時候該怎麼做?如下:同時監聽寬度和高度進行過渡
transition-property: width, height;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;
場面有點控制不住了,其實這四條就是transition
屬性的四個值,也就是如下寫法是等同的:
transition: width 2s ease .5s
// 等同於
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;
但是,千萬不要簡寫成這樣!會報錯的。至於爲啥報錯,看下一小節。
transition: height, width 2s ease .5s;
給多個屬性指定多個過渡
咱們再深入一點,如果想指定height
的過渡爲2s
,width
的過渡爲3s
該怎麼做呢?如下:
transition-property: height, width;
transition-duration: 2s, 3s;
// 其他屬性可以省略
這麼寫確實可以,第1個逗號前的爲一組,第二個逗號前的爲另一種...但是如果寫的屬性比較多的話,豈不是要開始數逗號了?所以我們可以用更方便的寫法簡寫一下:
transition: height 2s, width 3s;
這麼看是不是舒服多了,這也是上一小節爲啥報錯的原因,,
前必須是一個完整的過渡描述。
transform 轉換
基本用法
接下來把transition
放一下來看看transform
,基本格式如下:
transform: [轉換函數];
先說基本用法,transform
接受一個轉換函數,每個轉換函數都會有不同的效果,下面是三個主要的2D
轉換函數,更多函數點擊 W3C - CSS3 transform 屬性 查看:
函數 | 作用 | 參數介紹 | 參數默認值 |
---|---|---|---|
translate(x, y) |
元素位移 | 元素偏移的x軸和y軸距離,可爲負 | (0px, 0px) |
scale(x, y) |
元素縮放 | 元素x軸和y軸縮放的倍數,小於1爲縮小,大於1位放大,小於0效果和爲0時相等 | (1, 1) |
rotate(angle) |
元素旋轉 | 旋轉的角度,單位deg ,順時針旋轉 |
(0deg) |
所以我們想移動當前元素的話就可以這樣(往上移動 10 像素,往右移動 10 像素):
transform: translate(-10px, 10px);
指定多個轉換效果
好,回憶起了基本用法之後就深入一點,如果想給當前元素配置多個轉換效果怎麼辦,如下(向右下角移動 10 像素並順時針旋轉10°):
transform: translate(10px, 10px) rotate(10deg);
仔細看,轉換函數之間可沒有逗號。當初這個地方還坑了我一手。
transition + transform
下面這種寫法可以給transform
指定一個過渡:
transition: transform 2s ease .5s;
但是很容易就可以發現,這是給所有的轉換函數都配置了相同的過渡啊,如果我想讓位移translate
過渡的慢一點,而旋轉rotate
過渡的快一點該怎麼辦呢?
答案就是,使用animation
動畫效果,我暫時還沒有找到只使用transition
和transform
就能給多個轉換函數配置不同過渡的方法,有大佬知道一定要告訴我,多謝!
transform 對文檔流的影響
如果使用transition
監聽基本屬性,例如height
或width
等,其值在發生改變時就會對文檔流產生影響,比如下圖,鼠標懸停的div
長寬變化會把其他的div
給“擠開”,甚至最邊上的還擠到了下一行。並且,可以長寬屬性在發生變化時元素的固定點不是中心,而是左上角,當初如何把固定點換成中心可以困擾了我很久。
.box {
width: 100px;
height: 100px;
transition: all 0.4s ease;
}
.box:hover {
width: 120px;
height: 120px;
}
transition 過渡基本屬性
而使用transform
則不會出現這種情況,如下。因爲transform
只會影響當前元素的狀態,達到類似position: relative;
的效果,而且transform
是默認基於元素的中心進行轉換的,就算想改的話也可以使用transform-origin
屬性進行修改,具體用法非常簡單,這裏就不再贅述。
.box {
width: 100px;
height: 100px;
transition: all 0.4s ease;
}
.box:hover {
transform: scale(1.2, 1.2);
}
transition 過渡 transform