【Javascript】YUI アニメーションto,by,unit...

YUI アニメーションto,by,unit...

---

1: 絶対指定toと相対指定by
2: attributesを別指定する
3: 単位unit

単位unit

ここまで見てきた「width」や「height」の単位は、デフォルトで「px」です。つまり、たとえば「width:{to:20}」と書いたときの「20」は「20px」のことです。

これを、明示的に指定することでCSSのさまざまな単位を利用することができます。指定方法は、つぎのように、 「width」や「height」のプロパティとしてセットします。

     {width:{from:90,to:200,unit:'em'}}

いくつかの単位サンプル(これら以外のCSS単位も利用できます)
em	適用先のフォントサイズを1とする相対単位
px	ピクセル
%	パーセンテージ

em

(適用先のフォントサイズを1とする相対単位)

このサンプルでは、文字サイズの2倍の高さへ伸びます。 コードは次の通りです。

<script type="text/javascript">

 function chgWH2(id){
    var myAnim = new YAHOO.util.Anim(
     id, { 
       height : {from:20,to:2,unit:'em'} 
     },
     0.5,
     YAHOO.util.Easing.backBoth
   );
   myAnim.animate();
 }
</script>

<style>
#test2{ width:90px;height:20px;background-color:#ddd;font-size:20px }
</style>

<div id="test2">test2</div>
 
<form>
<input type="button" 
    value="高さが伸びます" 
    onclick="chgWH2('test2')">
</form>

px

(ピクセルを1とする単位)

このサンプルでは、高さ80pxへ伸びます。 コードは次の通りです。

<script type="text/javascript">

 function chgH3(id){
    var myAnim = new YAHOO.util.Anim(
     id, { 
       height : {from:20,to:80,unit:'px'} 
     },
     0.5,
     YAHOO.util.Easing.backBoth
   );
   myAnim.animate();
 }
</script>

<style>
#test3{ width:90px;height:20px;background-color:#ddd;font-size:20px }
</style>

<div id="test3">test3</div>
 
<form>
<input type="button" 
    value="高さが伸びます" 
    onclick="chgH3('test3')">
</form>

%

(パーセンテージ)

このサンプルでは、親要素(オレンジ色の部分)の高さ100pxの80%、つまり高さ80pxへ伸びます。 コードは次の通りです。

<script type="text/javascript">

 function chgH4(id){
    var myAnim = new YAHOO.util.Anim(
     id, { 
       height : {from:20,to:80,unit:'%'} 
     },
     0.5,
     YAHOO.util.Easing.backBoth
   );
   myAnim.animate();
 }
</script>

<style>
#oya4{  width:90px;height:100px;background-color:orange }
#test4{ width:90px;height:20px;background-color:#ddd;font-size:20px }
</style>

<div id="oya4">
<div id="test4">test4</div>
</div>

<form>
<input type="button" 
    value="高さが伸びます" 
    onclick="chgH4('test4')">
</form>

次回は、エフェクトとしてはインパクトのある不透明度なども試してみたいと思います。

前ページ