• Vue.js

Vue.jsでslideDownとslideUpするアニメーションを実装する方法

jQueryのメソッドにあるslideDown（スライドダウン）、slideUp（スライドアップ）をVue.jsでも再現したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

Vue.jsを使って開閉するアコーディオンメニューを実装してます。

ボタンをクリックするとメニューがslideDownで現れ、もう一度クリックするとslideUpで非表示になります。

実装手順は以下の通りです。

HTMLを準備

<div id="app">
    <button @click="toggle">クリック</button>
    <ul>
      <li>リスト</li>
      <li>リスト</li>
      <li>リスト</li>
      <li>リスト</li>
      <li>リスト</li>
    </ul>
</div>

本記事ではクリックしたらアコーディオンメニューをslideDown、slideUpさせるコード例を紹介します。

まずはHTMLを用意します。

クリック要素にclickディレクティブを付与します。

クリック要素と同じ階層の隣にアコーディオンで表示したいメニュー要素を記述します。

CSS

/*アコーディオン要素*/
ul {
  height: 0;
  overflow: hidden;
  transition: all 0.5s;
}

次にCSSでアコーディオン要素にheight: 0; overflow: hidden;を付与。

高さを0にして非表示にします。

状態変化した場合にアニメーションされるtransitonも付与します。

Vue.jsとJavaScript

const app = Vue.createApp({
    methods: {
　　//メソッドを定義
    toggle:function(e){
      //アコーディオン要素
      const elm = e.target.nextElementSibling;
　　　//トグルでクラスが切り替わる
      elm.classList.toggle("active"); 
      if(elm.classList.contains("active")){
      //要素の高さをstyle属性で付与
        elm.style.height = elm.scrollHeight + 'px';
      }else{
      //要素の高さを0にする
        elm.style.height = "0";
      }
    },
  }
});
app.mount("#app");

最後にVue.jsとJavaScriptを組み合わせてslideDown、slideUpを実現します。

最初の章で定義したclickディレクティブの値を元にメソッドを定義。

ここからはVueではなくJavaScriptの記述になります。

メソッド内でアコーディオン要素を変数指定。

classList.toggleを使ってアコーディオン要素がトグルでクラスが切り替わるようにします。

if文で条件分岐。

アコーディオン要素にクラスが付与されていたらstyle属性を使ってheight（高さ）を0。

クラスが無かったら、クラスを追加し、heightを要素分の高さだけpx指定。

あとは全章で指定したtransitonが効いてjQueryのようにslideDown、slideUpが再現されます。

以上で実装完了です。

まとめ

Vue.jsでslideDownとslideUpするアニメーションを実装する方法について紹介しました。

以上で解説を終わります。