[CSS][Transition] 轉場效果

前言

轉場是從 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

看原始碼：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