4

私のアプリでは、ページ上の要素の不透明度を次のようにアニメーション化しています。

.s {
    transition-property: opacity;
    transition-duration: 250ms;
}

(もちろん、ベンダー固有のバージョンで)。その後

.s.hidden {
    opacity: 0;
}

hiddenそのため、クラスが割り当てられるとアニメーションが開始されます。問題は、不透明度がゼロの要素でマウスイベントがまだ検出されていることです。これは望ましくないため、トランジションが終了した後visibilityにtohiddenまたはdisplaytoに設定する必要があります。私は次のようなことができることを願っています:none 

.s {
    transition-property: opacity, visibility;
    transition-duration: 250ms;
    transition-delay:    0, 250ms;
}

その後

.s.hidden {
    opacity: 0;
    visibility: hidden;
}

CSS トランジション機構を使用してこれを簡単に行うことができます。私が知る限り、visibilityアニメーション化できないプロパティであるため、それは機能しません。しかし、d3 などの他のトランジション フレームワークは、トランジションの開始時または終了時に単純に値を設定するという明白な方法で、アニメーション化できないプロパティを処理します。

私が思いついた最善の方法は、transitionendイベント (および などのブラウザー固有のバリアントoTransitionEnd) を使用して遷移の終わりをキャッチし、visibilityその時点で設定することですが、もっと簡単な方法があるかどうか疑問に思っています。できれば純粋に CSS に固執します。または、私の質問のタイトルが示すように、アニメーション化できないプロパティはそれだけですか?

4

2 に答える 2

5

visibility はアニメート可能なプロパティです。仕様を参照してください。

つまり、.hiddenクラスは説明どおりに機能します。デモはこちら: http://jsfiddle.net/ianlunn/xef3s/

編集：仕様は完全に明確ではありません：

可視性: 値の 1 つが「可視」である場合、0 から 1 の間のタイミング関数の値が「可視」およびタイミング関数の他の値にマップされる個別のステップとして補間されます (これは、トランジションまたは [0, 1] の外側の Y 値を持つ 'cubic-bezier()' 関数の結果として) より近いエンドポイントにマップします。どちらの値も「可視」でない場合は、補間できません。

しかし、これは私がそれが意味すると信じていることです：

visibility不透明度が 1 ～ 0 の間でアニメーション化するように、visibleとの間でスムーズにアニメーション化することはできません。遷移の開始状態と終了状態で と の間で切り替わるだけです。hiddenvisiblehidden

トランジションが へ、または からvisibilityのいずれかである場合、トランジションが発生します。visibility: hiddenたとえば、との間で遷移しようとするとvisibility: collapse、これらの値は「補間不可能」であり、遷移は発生しません。

したがって、私の例でopacityは、要素をフェードアウトさせ、遷移の最後に にvisibilityスナップしhiddenます。

于 2012-07-23T08:45:07.783 に答える
1

表示/可視性の切り替えの良い代替手段として、opacity:0withpointer-events:noneを使用できます。

于 2015-04-15T21:08:16.143 に答える