Vue.jsのtransitionによるアニメーションの基礎を学ぶVue.jsには、要素の表示・非表示の挙動においてアニメーションを実装していくtransition（トランジション）と呼ばれる機能があります。本記事ではフェードイン・フェードアウトを実装することによって、基本的なアニメーションの実装の流れを説明していきます。 基本的なtransitionの実装手順 まずは基本的なフェードイン・フェードアウトの実装から、実装手順を説明します。 サンプル1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> <style> .v-enter-active, .v-leave-active { transition: opacity 3s ease-out; }
