Vue

Vueによるトランジション・アニメーション

ユーザーに注意を促したり、画面変化を分かりやすくするための仕組みがVueには備わっている。

transition

See the Pen transition by git-cat-meow (@git-cat-meow) on CodePen.

CSSで設定した遷移時間で表示をON・OFFすることができる。

トランジションではVueに備わっているトランジションクラスで状態が定義されている。
v-enterやv-enter-toなど、スタートから終了、あるいはその逆がある。

Transition
https://ja.vuejs.org/guide/built-ins/transition

今回は<transition name=”fade”>としたため、CSSのクラスはfade-enterとなる。
transitionのname属性に指定がない場合はv-enterのようにvが割り当てられる。

カテゴリー: Vue
このサイトの主
投稿を作成しました 115

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る