Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
1,364
前言
轉場是從 A 狀態，轉變成 B 狀態，中間的過程，就叫轉場，在 CSS 中叫做 transition。適當的增加轉場效果，可以讓使用者的體驗更好，這是在 CSS3 中才有的新功能，目前大部份的主流瀏覽器也都支援了，這裡可看 transition 支援度。
語法
底下這行的意思是，所有屬性(all)只要發生改變，等待 1 秒(1s)，然後花 2 秒鐘(2s)的時間，轉場到新的樣式；ease-out 的意思是開始快，然後慢慢減速，是 timing-function 的其中一種。
transition: all 2s 1s ease-out;
// 等同於：
transition-property: all; // default: all
transition-duration: 2s; // default: 0；2s 表示 2 秒；2ms 表示 2 毫秒。
transition-delay: 1s; // 開始進行轉場效果之前，所要等待的時間。
transition-timing-function: ease-out;
範例
範例 1：hover
A B
看原始碼：html css
// html
A
B
// css
.demo {
background: #3991AE;
color: #fff;
cursor: pointer;
font-size: 6rem;
height: 10rem;
overflow: hidden;
position: relative;
text-align: center;
width: 20rem;
}
.demo-letter {
left: 50%;
position: absolute;
top: 50%;
// 轉場設定
transition: transform .4s ease-out;
}
.demo-letter1 {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.demo-letter2 {
-webkit-transform: translate(-50%, 200%);
transform: translate(-50%, 200%);
}
.demo:hover .demo-letter1 {
-webkit-transform: translate(-50%, -200%);
transform: translate(-50%, -200%);
}
.demo:hover .demo-letter2 {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
範例 2：focus
看原始碼：html css
// html
// css
.demo2 .demo-input {
background: #eee;
border: 4px solid #aaa;
font-size: 2rem;
padding: 1rem;
// 設定轉場效果
transition: all .5s;
}
.demo2 .demo-input:focus {
background: #fff;
border: 4px solid #3991AE;
}
範例 3：多狀態
看原始碼：html css js
// html
// css
.demo3 .demo-input {
background: #eee;
border: 4px solid #aaa;
font-size: 2rem;
padding: 1rem;
// 設定轉場效果
-webkit-transition: border .2s ease-out, background .4s ease-out;
transition: border .2s ease-out, background .4s ease-out;
}
.demo3 .demo-input:focus {
background: #fff;
border: 4px solid #3991AE;
}
.demo3 .demo-input.invalid{
border: 4px solid red;
}
.demo3 .demo-input.valid{
border: 4px solid green;
}
// js
$(function(){
$('#js-demo-input').keyup(function() {
var thisVal = $(this).val();
if ("hello".indexOf(thisVal) === -1) {
$('#js-demo-input').addClass('invalid').removeClass('valid');
} else if ("hello".indexOf(thisVal) > -1) {
if (thisVal === 'hello') {
$('#js-demo-input').addClass('valid').removeClass('invalid');
} else {
$('#js-demo-input').removeClass('valid').removeClass('invalid');
}
}
});
});
上面寫了三個範例，希望可以幫助大家瞭解 transition 的用途、用法。若有位何問題，可於底下留言。
參考資料
CSS3 Transitions
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章，獲得
23313次喜歡