revealTransition

概要

ある要素が表示されるときや消される場合、普通は何の愛想もなくパッと変わるだけですが、トランジション効果を使えば、様々なパターンで少しずつ表示されたり消去されたりします。このパターンは24種用意されており、スタイルのフィルター・プロパティから使用することが出来ます。 もちろん、MSによるCSSの独自拡張で特定のブラウザ用(IE4.0以上)の効果です。

トランジション効果を発生させるには以下のような手順が必要です。

• HTML側では、トランジション効果を与えたい要素にCSSを使ってfilter: revealTransを設定します。これは、スクリプトで操作するオブジェクトrevealTransを作成するためです。

• スクリプト側では以下のような操作をします。

  1. 指定したオブジェクトにトランジション効果を効かせる ― メソッドapply()
  2. オブジェクトのvisibilityを変化させる。visible←→hidden
  3. トランジション効果を実行させる ― メソッドplay()

スクリプトの例

下のボックスをクリックしてみてください。

以下はこのソースです。

<div id="box" onclick="goTransition()"
    style="filter: revealTrans;
           width:100;height:100;cursor:hand;
           background-color:#AFE;visibility:visible;">

<script type="text/JScript">
function goTransition() {
    box.filters[0].transition = 12;
    box.filters[0].duration = 2;
    box.filters[0].apply();
    box.style.visibility = "hidden";
    box.filters[0].play();
}
</script>

幅100px、高さ100pxのdiv要素をにstyle属性　filter: revealTrans　を設定しています。このdiv要素がクリックされると、関数goTransition()が実行されます。

goTransition()では、まず、revealTransのプロパティtransitionとdurationを設定しています。オブジェクトrevealTransにはフィルター・コレクションfiltersを用いてアクセスしています。一般に一つの要素に対して複数のフィルター効果を付けることができるので、フィルター・コレクションfiltersが用意されているようです。ここでは、revealTransは唯一のフィルターなので添え字"0"を付けていますが、以下のような書き方も可能です。

　　box.filters.revealTrans.transition = 12;
    又は
    box.filters[revealTrans].transition = 12;

プロパティtrasitionの値を12としていますが、これはRandom dissolveという効果のパターン番号です。プロパティdurationを通して持続時間を指定できます。

次にメソッドapply()によって申し込み、visibilityをhiddenに変え、最後にメソッドplay()により効果を実行させています。

property

transition

トランジション効果のパターン番号0から23までの数字で効果を指定します。

duration

トランジション効果が始まり終わるまでの時間を設定します。 値はFloating-pointで、秒.ミリ秒という形式。1、2.5、0.345 etc.

enabled

この効果を有効、無効にします。

[ bEnabled ] = object.filters.filterName.Enabled  

"bEnabled"は Boolean値

• true 有効
• false 無効
• デフォルト値は"true"

status

トランジションの現在の状態を戻します。(read-only)

[ iStatus ] = object.filters.filterName.status  

"iStatus"の値は次のようになる。

• 0 トランジションは停止している。
• 1 トランジションは既にapplyされている。
• 2 トランジションは実行中である。

method

apply

object.filters.filterName.apply()

指定したオブジェクトにトランジション効果をapply(申し込み)します。返値は無し。

stop

object.filters.filterName.stop()

トランジション効果の実行中止

play

トランジション効果の実行

object.filters.filterName.play([ iDuration ])

iDuration

Optional.小数点付の実数(0.0-N.n) で、効果の実行時間を指定する。プロパティでdurationが指定されていた場合は上書きされる。

Transition Test

blendTrans Filter

フェードインやフェードアウトをさせる。

書式

HTML

<ELEMENT STYLE = "filter: blendTrans(sProperties)" ... > 

Scripting

object.style.filter = "blendTrans(sProperties)" 

Properties

duration

enabled

status

Methods

apply

play

stop