vue圖片插入與設定夜間模式/動態過渡

<template>
  <div>
    <div>
      <h3>動畫過渡</h3>
    </div>
    <div class="uuu">
      <h3>網站夜間模式</h3>
      <button @click="show = !show">切換</button>
      <div class="abc" v-if="show">模式切換/開關</div>
    </div>
    <div class="uuu">
      <button @click="show = !show">切換</button>
      <h3>有動畫過渡</h3>
      <transition name="eee">
        <div class="abc" v-if="show">動態過渡效果 展示</div>
      </transition>
    </div>
    <div>
      <h3>插入圖片</h3>
      <img :src="kkk" alt="" />
    </div>
    <div>
      <h3>插入圖片並且設定動畫過渡</h3>
      <transition name="eee">
        <img :src="kkk" alt="" v-if="show" />
      </transition>
    </div>
        <div>
      <h3>插入圖片並且設定自定義的動畫過渡</h3>
      <transition name="yyy">
        <img :src="kkk" alt="" v-if="show" />
      </transition>
    </div>
  </div>
</template>

<script>
// 匯入圖片路徑
import kkk from "@/assets/like18.png";
// 匯入完畢
export default {
  name: "Animation",
  data() {
    return {
      show: false,
      //   匯入圖片的
      kkk: kkk,
    };
  },
};
</script>

<style scoped>
.abc {
  width: 100px;
  height: 100px;
  background-color: salmon;
  color: seagreen;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.uuu {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 官方網址 */
/* https://cn.vuejs.org/v2/guide/transitions.html */
/* v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。 */
/* v-leave-to：2.1.8 版及以上定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。 */
.eee-enter,
.eee-leave-to {
  opacity: 0;
  transform: translateX(200px) scale(3);
}
.eee-enter-active,
.eee-leave-active {
  transition: all 2s ease-in-out;
}
/* 圖片裡面的效果 */
/*  */
/* 進入效果 */
.yyy-enter-active{animation: bounce 1s;
}
/* 離開效果--設定相反效果 */
.yyy-leave-active{animation: bounce 1s reverse;}
@keyframes bounce {
    0%{transform: scale(0);}
    10%{transform: scale(0.2);}
    20%{transform: scale(0.4);}
    30%{transform: scale(0.6);}
}
</style>