<template>
  <div class="app">
    <button @click="btnClick">Toogle</button>
    <h2 v-show="isShow">Hello World</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isShow = ref(true)
const btnClick = () => {
  isShow.value = !isShow.value
}
</script>

/* 從什么狀態(tài)進入 */
.v-enter-from {
  opacity: 0;
}

/* 進入之后打算變成的狀態(tài) */
.v-enter-to {
  opacity: 1;
}

/* 進入的過程中做什么 */
.v-enter-active {
  transition: opacity 2s linear;
}

<template>
  <div class="app">
    <button @click="btnClick">Toogle</button>
    <!-- 使用內(nèi)置組件包裹h2 -->
    <transition>
      <h2 v-show="isShow">Hello World</h2>
    </transition>
  </div>
</template>

/* 離開后的狀態(tài) */
.v-leave-to,
/* 從什么狀態(tài)進入 */
.v-enter-from {
  opacity: 0;
}

/* 開始離開的狀態(tài) */
.v-leave-from,
/* 進入之后打算變成的狀態(tài) */
.v-enter-to {
  opacity: 1;
}

/* 離開過程中做什么 */
.v-leave-active,
/* 進入的過程中做什么 */
.v-enter-active {
  transition: opacity 1s linear;
}

/* 定義進入的動畫 */
.v-enter-active {
  animation: myAnim 2s linear;
}

/* 定義離開的動畫 */
.v-leave-active {
  animation: myAnim 2s linear reverse;
}

/* 定義序列幀動畫 */
@keyframes myAnim {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.25);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<template>
  <div class="app">
    <button @click="btnClick">Toogle</button>
    <!-- 使用內(nèi)置組件包裹h2 -->
    <transition>
      <h2 v-show="isShow">
        今天2022年8月6日星期六，利好消息來襲！因為經(jīng)濟數(shù)據(jù)仍顯疲軟，
        市場對全球經(jīng)濟增速放緩可能抑制需求的擔(dān)憂加劇，導(dǎo)致成品油調(diào)價
        掛靠的國際油價繼續(xù)下挫，同時綜合原油品種變化率也已經(jīng)完成正值
        到負值的轉(zhuǎn)變。數(shù)據(jù)顯示：截至國內(nèi)成品油調(diào)價周期的第8個工作日
        結(jié)束，原油綜合變化率為-0.83%，詳細成品油調(diào)價窗口開啟時間定在
        8月9日24時開啟。
      </h2>
    </transition>
  </div>
</template>

/* 定義transition動畫 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-enter-to,
.v-leave-from {
  opacity: 1;
}


.v-enter-active {
  /* 設(shè)置兩個不同的動畫, 最好保持動畫時間一致 */
  animation: myAnim 2s linear;
  transition: opacity 2s linear;
}

.v-leave-active {
  /* 設(shè)置兩個不同的動畫, 最好保持動畫時間一致 */
  animation: myAnim 2s linear reverse;
  transition: opacity 2s linear;
}

/* 定義序列幀動畫 */
@keyframes myAnim {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.25);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<!-- 告知以哪一個動畫為標準 -->
<transition type="transition">
  <h2 v-show="isShow">
    今天2022年8月6日星期六，利好消息來襲！因為經(jīng)濟數(shù)據(jù)仍顯疲軟，
    市場對全球經(jīng)濟增速放緩可能抑制需求的擔(dān)憂加劇，導(dǎo)致成品油調(diào)價
    掛靠的國際油價繼續(xù)下挫，同時綜合原油品種變化率也已經(jīng)完成正值
    到負值的轉(zhuǎn)變。數(shù)據(jù)顯示：截至國內(nèi)成品油調(diào)價周期的第8個工作日
    結(jié)束，原油綜合變化率為-0.83%，詳細成品油調(diào)價窗口開啟時間定在
    8月9日24時開啟。
  </h2>
</transition>

<transition mode="in-out">
  <h2>Hello Worl</h2>
  <h2>你好啊, 李銀河</h2>
</transition>

<div class="app">
  <div>
    <button @click="isShow = !isShow">切換</button>
  </div>

  <transition name="why" mode="out-in">
    <component :is=" isShow ? 'home': 'about'"></component>
  </transition>
</div>

<div class="app">
  <div>
    <button @click="isShow = !isShow">切換</button>
  </div>

  <transition name="why" mode="out-in" appear="">
    <component :is=" isShow ? 'home': 'about'"></component>
  </transition>
</div>

<template>
  <div class="app">
    <button @click="addNumber">添加數(shù)字</button>
    <button @click="removeNumber">刪除數(shù)字</button>
    
    <template v-for="item in nums" :key="item">
      <span>{{ item }}</span>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const nums = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])

const addNumber = () => {
  nums.value.splice(randomIndex(), 0, nums.value.length)
}

const removeNumber = () => {
  nums.value.splice(randomIndex(), 1)
}

const randomIndex = () => {
  return Math.floor(Math.random() * nums.value.length)
}

</script>

span {
  margin-right: 20px;
  display: inline-block;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.v-enter-to,
.v-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.v-enter-active,
.v-leave-active {
  transition: all 2s linear;
}

<template>
  <div class="app">
    <button @click="addNumber">添加數(shù)字</button>
    <button @click="removeNumber">刪除數(shù)字</button>
    
    <!-- tag屬性, 告知渲染成div -->
    <transition-group tag="div">
      <template v-for="item in nums" :key="item">
        <span>{{ item }}</span>
      </template>
    </transition-group>
  </div>
</template>

/* 定位解決刪除占用空間, 無法執(zhí)行動畫問題 */
.v-leave-active {
  position: absolute;
}
  /* 針對其他節(jié)點移動需要的動畫 */
.v-move {
  transition: all 2s linear;
}