Effects

Effects 提供的動畫效果主要是以 transitiontransform 來完成。IE 部分至少要 10.0+。可單獨下載 kule-effects.min.css 使用。

要使用 Effects 效果之前,要先加上 .effect,再選擇『效果名稱』,觸發方式有兩種,一種是加上 .in 之後就會觸發效果,另一種是加上 .hover 之後可以直接藉由滑鼠觸碰進而觸發效果。

另外,可透過以下方法來偵測效果是否已結束。

$('.selector').one('webkitTransitionEnd oTransitionEnd transitionend', function(){
    //Do something...
});

基本效果介紹

  • 有關效果放大與縮小分別為 .zoomin 以及 .zoomout。Zoomin 初始值為 scale(1.5),Zoomout 初始值為 scale(0.5),當兩者都加上 .in 時,都會變成 scale(1)
  • 有關透明度的變化請使用 .fade,Fade 初始值為 opacity: 0;,加上 .in 之後會變成 opacity: 1;
  • 部分效果動作會有移動效果,要使用移動效果時可選擇 .up , .down , .left , .right,各加上 .in 時,X或Y 的值會從正負100回到 0。

效果範例

Bounces

Bounce
Demo
Bounce Up
Demo
Bounce Down
Demo
Bounce Left
Demo
Bounce Right
Demo
<div class="effect bounce zoomout">Bounce</div>
<div class="effect bounce up">Bounce Up</div>
<div class="effect bounce down">Bounce Down</div>
<div class="effect bounce left">Bounce Left</div>
<div class="effect bounce right">Bounce Right</div>

Fades

Fade
Demo
Fade Up
Demo
Fade Down
Demo
Fade Left
Demo
Fade Right
Demo
<div class="effect fade">Fade</div>
<div class="effect fade up">Fade Up</div>
<div class="effect fade down">Fade Down</div>
<div class="effect fade left">Fade Left</div>
<div class="effect fade right">Fade Right</div>

Fades + ZoomOut

Fade ZoomOut
Demo
Fade ZoomOut Up
Demo
Fade ZoomOut Down
Demo
Fade ZoomOut Left
Demo
Fade ZoomOut Right
Demo
<div class="effect fade zoomout">Fade ZoomOut</div>
<div class="effect fade zoomout up">Fade ZoomOut Up</div>
<div class="effect fade zoomout down">Fade ZoomOut Down</div>
<div class="effect fade zoomout left">Fade ZoomOut Left</div>
<div class="effect fade zoomout right">Fade ZoomOut Right</div>

Fades + ZoomIn

Fade ZoomIn
Demo
Fade ZoomIn Up
Demo
Fade ZoomIn Down
Demo
Fade ZoomIn Left
Demo
Fade ZoomIn Right
Demo
<div class="effect fade zoomin">Fade ZoomIn</div>
<div class="effect fade zoomin up">Fade ZoomIn Up</div>
<div class="effect fade zoomin down">Fade ZoomIn Down</div>
<div class="effect fade zoomin left">Fade ZoomIn Left</div>
<div class="effect fade zoomin right">Fade ZoomIn Right</div>

Sign

Sign Up
Demo
Sign Down
Demo
Sign Left
Demo
Sign Right
Demo
<div class="effect sign up">Sign Up</div>
<div class="effect sign down">Sign Down</div>
<div class="effect sign left">Sign Left</div>
<div class="effect sign right">Sign Right</div>

Flips

Flip
Demo
FlipX
Demo
FlipY
Demo
<div class="effect flip">Flip</div>
<div class="effect flipX">FlipX</div>
<div class="effect flipY">FlipY</div>

Pulls

Pull-up
Demo
Pull-down
Demo
Pull-left
Demo
Pull-right
Demo
<div class="effect pull-up">Pull-up</div>
<div class="effect pull-down">Pull-down</div>
<div class="effect pull-left">Pull-left</div>
<div class="effect pull-right">Pull-right</div>

Rotates

Rotate
Demo
Rotate DownLeft
Demo
Rotate DownRight
Demo
Rotate UpLeft
Demo
Rotate UpRight
Demo
<div class="effect rotate">Rotate</div>
<div class="effect rotate downleft">Rotate DownLeft</div>
<div class="effect rotate downright">Rotate DownRight</div>
<div class="effect rotate upleft">Rotate UpLeft</div>
<div class="effect rotate upright">Rotate UpRight</div>

Others

Blur
Demo
Fall
Demo
Puff
Demo
Vanish
Demo
Slit
Demo
<div class="effect blur">Blur</div>
<div class="effect fall">Fall</div>
<div class="effect puff">Puff</div>
<div class="effect vanish">Vanish</div>
<div class="effect slit">Slit</div>

參考來源: