Zenn
🖥

Nuxt2 – vue-closable + transition でフェードイン・フェードアウトのアニメーションをするコード例

2023/09/01に公開
tech

ポイント

  • 表示を切り替えたいエリアを <transition>で囲む
  • <trantision name="xxx"> の name に対して CSS のプロパティの名前を合わせる ( 例: xxx-enter-to )

例


<template>
  <div id="app">
    <button ref="button" class="toggle-button" @click="showPopup = !showPopup">
      TOGGLE
    </button>
    <transition name="opacity">
      <div v-show="showPopup" v-closable="{
        exclude: ['button'],
        handler: 'onClose'
      }" class="popup-box">
        Test Popup Box
      </div>
    </transition>
  </div>
</template>

<script>
import Vue from 'vue'
import VueClosable from 'vue-closable'

Vue.use(VueClosable)

export default {
  data() {
    return {
      showPopup: false
    }
  },

  methods: {
    onClose() {
      this.showPopup = false
    }
  }
}
</script>

<style scoped>
.opacity-enter {
  opacity: 0;
}

.opacity-enter-active {
  transition: opacity 1s;
}

.opacity-enter-to {
  opacity: 1;
}

.opacity-leave {
  opacity: 1;
}

.opacity-leave-active {
  transition: opacity 1s;
}

.opacity-leave-to {
  opacity: 0;
}
</style>

表示例

image
image

環境

@nuxt/cli v2.15.8

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-05

Discussion