【Vue.js】 transitionを使用してfade-in, fade-out #JavaScript

【ゴール】

【Vue.js】 transitionを使用してfade-in, fade-out

【環境】

mac catarina 10.156
Vue.js v2.6.12

【実装】

■ifで条件分岐 ■transition　name="fade"で、fadeモードに

Helloworld.vue


<template>
  <div>
    <h2>hi</h2>
    <button @click="show = !show">変更</button>
    <transition name="fade" >
      <p v-if="show">trasition</p>
    <transition>
  </div>
<template>

<script>

export default ({
  data(){
    return {
      show: true       
    }
  }
})
</script>

<style scoped>

.fade-enter-active,
.fade-leave-active {
  transion: opacity 0.5s;
}


.fade-enter,
.fade-leave-to{
  opacity: 0;
}

</style>

以上

【まとめ】

■transitionでアニメーションを作成
■nameでアニメーションの種類を指定してあげる
■style内でtransitionの設定をする

【オススメ記事】

■ 【Vue.js】クリック処理　@click
https://qiita.com/tanaka-yu3/items/e578cadf35a7bc024770

■ 【Vue.js】 IF文・For文　条件分岐、繰り返し処理
https://qiita.com/tanaka-yu3/items/0ccf9a11525331b764de

■ 【Vue.js】 vue-routerを利用してルーティング作成し画面遷移を！！
https://qiita.com/tanaka-yu3/items/1b1f5f2b2d9638f50d33