CSS transition/transform

• http://webkit.org/misc/DatabaseExample.html

Safariも3.1になった事だしクライアントサイドデータベースを触ってみようかと取り敢えず見つけたサンプル。
肝心のデータベースよりも閉じるときのDashboardライクなアクションの方に気を取られてしまった。WebKitがCSSでAnimationだのTransformだのを実装しているのは知っていたけど、実際に見るとやっぱり印象が違う。

        var duration = event.shiftKey ? 2 : .25;
        this.note.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';
        this.note.offsetTop; // Force style recalc
        this.note.style.webkitTransformOrigin = "0 0";
        this.note.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';
        this.note.style.opacity = '0';

独自拡張やりたい放題だなApple。まぁAcidテストで頑張っているからいいけど。