之前寫了一篇 CSS 動畫 時，忘了應該先寫這個狀態變化的動畫，大部份的應用都是用在滑鼠移到上面時的用動畫方式改變狀態，實際上，這個功能對於所有狀態變化都可以變成動畫
參數說明：
transition [動畫持續時間] [delay 多久開始] [timing-function]
transition-delay [delay 多久開始]
transition-duration [動畫持續時間]
transition-property [指定改變的屬性]
transition-timing-function [動畫 timing]
我個人偏好不使用 transition-property ，這樣可以更自由的使用這個功能
首先先來一個最簡單的範例:
在 #a11181_div:hover 裡頭加了 transition: 1s 後 ，滑鼠移過去時，顏色會慢慢的變成黃色，同時長度從 100px 慢慢變成 200px， 當滑鼠移開時，因為在 #a11181_div 加上了 transition: 0.2s; ，會以動畫方式很快的恢復原狀，如果沒有加上 transition ，狀態會瞬間改變，不會有動畫效果，另外還有加上 transition-delay , 所以會等 0.5 秒後才開始動畫
而下面的 [SET] 和 [UNSET] 是利用 javascript 去做設定，結果一樣會以動畫顯示, 當用 javascript 設定時，是直接寫在元件上，所以 hover 改變 width 就沒作用了，而 [CSS SET] 和 [CSS UNSET] 的是直接修改本來的 CSS 設定，所以不影響 hover 。
<style id="a11181_css">
#a11181_div
{
width: 100px;
height: 100px;
background-color:#f00;
transition: 0.2s;
transition-delay:0.5s;
transition-timing-function: linear;
}
#a11181_div:hover
{
background-color:#ff0;
width:200px;
transition: 1s cubic-bezier(0.6, -0.6, 0.1, 1.6);
}
#a11181_set button
{
font-size:1em;
}
</style>
<div id="a11181_div">
</div>
<br>
<div id="a11181_set">
<button id="a11181_bb">SET</button>
<button id="a11181_bb1">UNSET</button>
<button id="a11181_bb2">CSS SET</button>
<button id="a11181_bb3">CSS UNSET</button>
</div>
<script>
$("#a11181_bb").on("click",function()
{
$("#a11181_div").css("width","300px");
});
$("#a11181_bb1").on("click",function()
{
$("#a11181_div").css("width","");
});
$("#a11181_bb2").on("click",function()
{
var rc=cssjson("#a11181_css");
rc.set("#a11181_div",
{
width:"300px"
});
});
$("#a11181_bb3").on("click",function()
{
var rc=cssjson("#a11181_css");
rc.set("#a11181_div",
{
width:"100px"
});
});
</script>
沒有留言:
張貼留言