Sign in

Vue.jsにはトランジションという便利な機能があります。

このトランジション機能とCSSを組み合わせることによって簡単にアニメーションを作成することができます。

今回はサンプル作成の流れに沿って、このトランジション機能について初学者向けにわかりやすく解説していこうと思います 😎

サンプルではVue.jsのトランジションとCSSを使ってモーダルをふわっとしたアニメーションで表示させるUIを作成していきます。

モーダルの表示部分を作成

まずはアニメーションせずにボタンをクリックしたら表示するだけのモーダルを作成していきます。今回はサンプルなので極力シンプルに実装します。

<div id="sample">
<button v-on:click="show = !show">
ボタン
</button>
<div …

arock

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store