IEのsunsetエフェクトにも中央に吸い込まれる効果を追加したい

メインの開発PCが帰ってくるまでは、Vistaでガマン中。

uu.module.effect.sunset() は IEで動作するときに限り、中央に吸い込まれるような効果がありません。
今回は「実装しようとしたけどダメだったよ」日記です。

sunsetエフェクトは http://uupaa-js.googlecode.com/svn/trunk/demo/module/uu.module.effect.htm の右下のやつです。

Filter で同様の効果がないか調べた

RevealTrans というトランジションの2番(CircleIn)が中心に向かって消える効果をもっているようです。

実装してみた

IE用のsunsetメソッドに、▼▲の部分を追加し、_circleIn メソッドを追加します。

uu.ua.ie && uu.mix(uu.module.effect.prototype, {
  sunset:   function(elm, param /* = { speed, fn, keep: false, revert: false, scanLine: false, roundRect: true } */) {
              var pp = this._prepare(elm, uu.mix.param(param || {}, { scanLine: false, roundRect: true })),
                  run = 0, R = this._revert;
              uu.css.show(elm);

              function next() { (++run === 2) && (R(elm, pp.revert), pp.fn(elm)); }
              this._wave(elm, 0, pp.speed, next, pp.roundRect);
              this._fade(elm, 0, pp.speed * 2, next, 1, 0);
// ▼▼▼▼▼▼
              this._circlein(elm, speed / 1000);
// ▲▲▲▲▲▲
            },
  _circleIn:
            function(elm, duration) {
              var id = "DXImageTransform.Microsoft.RevealTrans";

              elm.style.filter += uu.sprintf(" progid:%s(duration=0.1,transition=2)", id);
              elm.filters[id].apply();
              // 【A】
              elm.filters[id].play(duration);
            },

動きそうなのに、なぜか動かない

MSDNのサンプルをよく見ると、【A】の辺り(apply()の後、play()の前)に、こんなコードがこっそり紛れ込んでいます。

              elm.style.visibility = "hidden";

どうやら

RevealTrans は元の要素が表示されていると機能しない(効果が見えない)エフェクトらしいです。
# MSDNのどこにもそれらしい記述は見つからなかったけど。

ダメだった

elm.style.visibility = "hidden";

する必要がある限り、他のエフェクトとは連携できませんね。残念。

おまけ

IE8β2ではてなダイアリーを見ると、コメントと本文が重なって表示されます。
# 日記が読めないよ
こういうのは、そのうち直るもんなんでしょうか。