vue3 过渡动画和动画效果

 

动画：先放大 再消失

<template>
  <div class="app">
    <div>
      <button @click="show = !show">切换</button>
    </div>

    <!-- 插入DOM元素和移除dom元素动画同时进行 -->
    <transition name="h1">
      <h1 v-if="show">hello world</h1>
      <h1 v-else>你好啊，李银河</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      show: true,
    };
  },
};
</script><style>.app {

  width: 400px;
  margin: 0 auto;
}
h1 {
  display: inline-block;
}
.h1-enter-from,
.h1-leave-to {
  opacity: 0;
}
.h1-enter-to,
.h1-leave-from {
  opacity: 1;
}

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

//或使用动画

.h1-enter-active {
  animation: bounce 1s ease;
}
.h1-leave-active {
  animation: bounce 1s ease reverse;
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>

 

第三方的动画类库 

   1.  https://animate.style/     css动画库

   下载引入：

$ npm install animate.css --save

import 'animate.css';

//用法
.h1-enter-active {
  animation: headShake 1s ease;
}

//或直接用class
<transition class="animate__animated animate__headShake"> 
  <h1 v-if="show">hello world</h1> 
</transition>
//或使用自定义过度class（优先级更高）
<transition enter-active-class="animate__animated animate__headShake"> 
   <h1 v-if="show">hello world</h1> 
</transition>

 

  2. https://greensock.com/  的js动画库

  下载引用：

npm install gsap        
import gsap from 'gsap'

中文文档：https://www.tweenmax.com.cn/

数字变化小例子：

<div>
    <input type="number" step="100" v-model="counter"
    <h2>当前计数：{{showNumber.toFiexed(0)}}</h2>
</div>

import gsap from 'gsap'
data(){
   return {
      counter:0,
      showNumber:0  
    }
}
watch:{
    counter(newValue){
       gsap.to(this,{duration:1,showNumber:newValue})
    }  
}

 

动画过度transition
1.(transition过度）all:所有的全部
   transition:all ； 给所有过度效果（单位s）
   transition：all ease；（默认效果慢快慢）
   transition：all linear;（匀速变换）
   transition：all ease-in;（低速开始）
   transition：all ease-out:（低速结束）
   transition:background-color 1s ,width 5s,height 5s ; （同时背景宽高效果过度时间和格式）
   transition:过度属性 过度时间 时间曲线 延迟时间(鼠标点上去2s后开始变换）;（复合写法）

变形过度transform
2.translate 位移
   transform:translate( );平移(位移)
   transform: translatey(位移y轴);
   transform: trnslatex(位移x轴);
   可以放两个值：第一个值位移x轴 第二个位移y轴
   transform: translate(100px,100px);(两个值一起写往右下角移 写的时候用，隔开)
3.scale(n) 缩放
   transform: scale(2); （(n=2)放大两倍）
   一个值:宽高同时放大缩小
   两个值:第一个值缩放宽度,第二个值缩放高度
   正整数(放大),负整数(翻转),小数(缩小)
4.rotate(n deg) 旋转
   transform:rotate(45deg) ;((n=45deg)向顺时针旋转45度）
   正数:顺时针旋转;
   负数:逆时针旋转；
5.skew(n deg) 斜切(倾斜)
   transform:skew(-72deg)((n=-72)向逆时针斜切72度)
   (他们都不会影响其他元素的位置,对行内标签没有效果)

*transition transform translate 三者区别：(个人理解)

transform仅仅是变换形态，没动画效果，而translate是transform一个平移属性，transition 则需要变换的形态、时间、速度三者才能成为一个动画。