vue动画|洗牌(打乱)

html,不止适用于文本，可以包裹组件进行动画，最底部列表动画(洗牌)

//用transition包裹住添加动画的内容
//默认进入和离开动画同时进行，mode设置先进行的动画,in-out进入动画先进行，out-in离开动画先进行，appear在页面初次加载时添加动画
<transition name="why" mode="in-out" appear>
   //v-if控制两个文本切换显示
  <h2 v-if="isShow" >哈哈哈</h2>
  <h2 v-else>呵呵呵</h2>
</transition>

css,使用transition动画，定义了name类名前面用name，没定义用v，如.v-enter-from

//动画开始前和结束后的状态
.why-enter-from,
.why-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
//动画完成后和结束前的状态
.why-enter-to,
.why-leave-from {
  opacity: 1;
  transform: scale(1);
}
//进入动画和离开动画，使用transition
.why-enter-active,
.why-leave-active {
  transition: all 2s ease;
}

css,使用animation动画

//自定义动画名enterWhy，里面的节点可以更多，不固定三个
@keyframes enterWhy {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
//进入动画，使用animation
.why-enter-active {
  animation: enterWhy 2s ease;
}
//离开动画，reverse代表将上面enterWhy动画反转进行
.why-leave-active {
  animation: enterWhy 2s reverse;
}

transition-group列表动画，在数字列表随机位置添加删除一个数，添加删除时有进入离开动画，添加时旁边的数字移动空出位置，删除时旁边的数字移动占位，移动时有动画

//安装洗牌插件 npm install underscore
<script setup>
import { computed, ref } from "vue";
//引入洗牌
import { shuffle } from "underscore";
const num = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
//生成随机数
const randomNumber = computed(() => {
  return Math.floor(Math.random() * num.value.length);
});
//添加
const add = () => {
  num.value.splice(randomNumber.value, 0, num.value.length);
};
//删除
const subtract = () => {
  num.value.splice(randomNumber.value, 1);
};
//打乱
const shuffleNumber = () => {
  num.value = shuffle(num.value);
};
</script>

<template>
  <div class="home">
    //在列表中随机位置添加/删除/打乱一个数
    <button @click="add">添加</button>
    <button @click="subtract">删除</button>
    <button @click="shuffleNumber">打乱</button>
    //包裹列表，tag后面跟一个包裹列表的标签
    <transition-group name="why" tag="div">
      //遍历列表显示，列表中都是数字
      <template v-for="(item, index) in num" :key="item">
        <span>{{ item }}</span>
      </template>
    </transition-group>
  </div>
</template>

<style  scoped>
//span是一个行内元素，需要转换才能添加动画
span {
  margin-right: 10px;
  display: inline-block;
}
//动画开始前和结束后的状态，改变透明度和从下向上移入位置
.why-enter-from,
.why-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
//动画完成后和结束前的状态，改变透明度和从上向下移出位置
.why-enter-to,
.why-leave-from {
  opacity: 1;
  transform: translateY(0);
}
//进入动画和离开动画，使用transition
.why-enter-active,
.why-leave-active {
  transition: all 2s ease;
}
//opacity隐藏会占位所以旁边的数字不会缩进，使用定位移除
.why-leave-active {
  position: absolute;
}
//旁边的数字移动空出和占位
.why-move {
  transition: all 2s ease;
}
</style>