[游戏开发]Vue3 过渡&动画

Transition过渡动画

<transition name="why">
  <h2 v-if="isShow">Hello World</h2>
</transition>

.why-enter-from,
.why-leave-to {
  opacity: 0;
}
.why-enter-to,
.why-leave-from {
  opacity: 1;
}
.why-enter-active,
.why-leave-active {
  transition: opacity 2s ease;
}

Transition组件的原理:

1. 自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；

2. 如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；

3. 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行；

animation动画

<transition name="why">
  <h2 v-if="isShow">Hello World</h2>
</transition>

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

如果同时存在Transition与animation则可以通过设置 type 属性指定类型、duration 指定过渡的时间.

type 属性为 animation 或者 transition 来明确的告知Vue监听的类型

duration可以设置两种类型的值：

? pnumber类型：同时设置进入和离开的过渡时间；

? pobject类型：分别设置进入和离开的过渡时间；

<transition name="why" type="transition" :duration="{enter: 800, leave: 1000}">
  <h2 class="title" v-if="isShow">Hello World</h2>
</transition>

选择过渡的模式mode

mode 可以设置动画进入和离开的顺序。

? in-out: 新元素先进行过渡，完成之后当前元素过渡离开；

? out-in: 当前元素先进行过渡，完成之后新元素过渡进入；

<transition name="why" mode="out-in">
  <h2 class="title" v-if="isShow">Hello World</h2>
  <h2 class="title" v-else>你好啊,李银河</h2>
</transition>

animate.css的基本使用

官方地址： Animate.css | A cross-browser library of CSS animations.

安装animate.css： npm install animate.css

在main.js中导入animate.css： import "animate.css";

两种用法：

//用法一  直接使用animate库中定义的 keyframes 动画
.why-enter-active {
    animation: bounceInUp 1s ease-in;
}
.why-leave-active {
  animation: bounceInUp 1s ease-in reverse;
}

//用法二  直接使用animate库提供给我们的类
<transition enter-active-class="animate__animated animate__fadeInDown" //animate__animated为基本配置，后者为所选动画
            leave-active-class="animate__animated animate__flipInY">
  <h2 class="title" v-if="isShow">Hello World</h2>
</transition>

生命周期钩子函数与gasp结合使用

官方地址： GSAP - GreenSock

生命周期钩子函数：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @afterLeave="afterLeave"
>
  <h2 class="title" v-if="isShow">Hello World</h2>
</transition>

methods:{
  beforeEnter() {
    console.log("beforeEnter");
  },
  enter() {
    console.log("enter");
  }, 
}

gsap库:可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的；

第一步：需要安装gsap库； npm install gsap

第二步：导入gsap库；

第三步：使用对应的api即可；

两者相结合使用：

<transition @enter="enter"
            @leave="leave"
            :css="false">
  <h2 class="title" v-if="isShow">Hello World</h2>
</transition>

methods: {
  enter(el, done) { 
    console.log("enter");
    gsap.from(el, {
      scale: 0,
      x: 200,
      onComplete: done
    })
  },
  leave(el, done) {
    console.log("leave");
    gsap.to(el, {
      scale: 0,
      x: 200,
      onComplete: done
    })
  }
}

• 在使用JavaScript来执行过渡动画时，需要进行 done 回调，否则它们将会被同步调用，过渡会立即完成。

• 添加 :css=“false”，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖