基本的に、幅と高さが指定された要素があります。「ズーム」クラスを追加すると、サイズと位置を変更したいと思います。適切な webkit-animation (キーフレーム) で動作するようになりました。
問題は、「ズームされた」クラスを削除すると、元のサイズと位置に突然戻ってしまうことです。アニメーションでそれをやりたいと思っています。
これはおそらく遷移プロパティを使用して解決できる例ですが、私の実際のケースでは、かなり複雑なキーフレーム アニメーションがあるため、解決できません。
では、基本的な状態を保持し、クラスが追加されたときに新しい状態にアニメーション化し、クラスが削除されたときにアニメーションを基本的な状態に戻すにはどうすればよいでしょうか? ありがとう。
あなたが抱えている問題は、移行では解決されません。
トランジションを両方の方法で機能させるのは、通常、トランジションをクラスで設定し、ステートでプロパティを変更することです。このようにして、トランジションを常に設定し、プロパティのみを変更します。
トランジションを変更された状態のみに設定した場合、トランジションを削除すると、トランジションは要素内になくなるため、変更はすぐに行われます。
クラスを追加することが本当に必要な手順である場合 (何らかの理由で)、次の 3 つの可能性があります。
コメントで示唆されているように、基本状態への変更では、アニメーションを逆に再生するプロパティのみを持つ別のクラスを追加する必要があります。
基本要素でアニメーションを逆に設定し、追加されたクラスでアニメーションを設定します。
アニメーション終了イベントでクラスを実際に削除する精巧なシステムに移動し、何をするかによってそれがトリガーされます(複雑すぎると思います)
要素をアニメーション化する方法はありません - トランジション -要素からそれを削除するとどうなりますか