0

Dojo と dojo/_base/fx を使用して CSS の「display」プロパティの変更をアニメーション化しようとしています。

これが私のコードです:

function invert_display(id) {
    var element = dom.byId(id),
        currDisplay = style.get(element, 'display'),
        nextDisplay = currDisplay === 'block' ? 'none' : 'block';
    baseFx.animateProperty({
        node: id,
        properties: {
            display: 'none',
            backgroundColor: '#f00'
        }
    }).play();
}

モジュールは適切にインポートされ (AMD スタイル)、変数値は有効で、div の背景色は赤に変わりますが、div はフェードアウトしません ("display" プロパティが "none" に設定されています)。

よろしくお願いします！

4

1 に答える 1

0

と可視状態 ( など) の間に中間値がないため、displayスタイルを実際にアニメーション化することはできません。noneblockinline

フェードイン/フェードアウトするには、スタイルをアニメーション化する必要がありますopacity(Dojo の基本 fx には、実際には既にこのための関数があります)。色もアニメーション化したいので、たとえば、関数を次のように変更できます。

function invert_display(id) {
    var element = dom.byId(id),
        opacity = style.get(element, 'opacity');

    baseFx.animateProperty({
        node: id,
        properties: {
            opacity: opacity<1 ? 1 : 0,
            backgroundColor: opacity<1 ? '#00f' : '#f00'
        }
    }).play();
}

ここで、不透明度を 0 に設定しても要素は削除されず、透明になるだけです。それもエレガントに削除したい場合は、おそらくheight: opacity<1 ? 42 : 0アニメーションにも追加して、フェード中に「最小化」することができます。onEndあるいは、およびonBegin関数を使用してdisplay、アニメーションの終了/開始時にスタイルを設定することもできます (ただし、これは常に非常にエレガントに見えるとは限りません)。

例: http://jsbin.com/aqigoj/1/edit

于 2013-03-26T15:55:42.103 に答える