Vue.js でモーダルが表示/非表示された際に呼ばれる処理の実装
実際のコード HTML側 transition を指定
<template> <transition name="app-modal" v-on:after-enter="afterEnter" v-on:leave="leave"> <div id="overlay" v-on:click="clickEvent"> <div id="content" v-on:click="stopEvent"> <p><slot></slot></p> <button @click="clickEvent">close</button> </div> </div> </transition> </template> JavaScript側 以下のイベントがフックされるようになる
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // 取り消しハンドル }, beforeLeave: function (el) { el.textContent = 'beforeLeave' }, leave: function (el) { el.