transition使用(采用vue3代码示例)

hujian66

已于 2023-11-01 16:53:02 修改

阅读量109

点赞数

文章标签： javascript vue.js 前端

于 2023-02-28 09:37:53 首次发布

本文链接：https://blog.csdn.net/hujian66/article/details/129254958

版权

基本使用

<template>
  <div>
    <el-button @click="flag = !flag" type="primary">switch</el-button>
    <Transition name="fade">
      <div v-if="flag" class="box"></div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from "vue";
const flag = ref(true);
</script>

<style lang="scss">
.box {
  height: 200px;
  width: 200px;
  background-color: skyblue;
}
.fade-enter-from,
.fade-leave-to {
  height: 0;
  width: 0;
  transform: rotate(360deg);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 2s ease;
}
.fade-enter-to,
.fade-leave-from {
  height: 200px;
  width: 200px;
}
</style>

结合 animate 使用

https://cn.vuejs.org/guide/built-ins/transition.html#css-animations
https://animate.style/
注意: 4点几的版本class都需要加上 animate__animated

<template>
  <div>
    <el-button @click="flag = !flag" type="primary">switch</el-button>
    <Transition
      enter-active-class="animate__animated animate__backInDown"
      leave-active-class="animate__animated animate__bounceOutDown"
    >
      <div v-if="flag" class="box"></div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from "vue";
import "animate.css";
const flag = ref(true);
</script>

<style lang="scss">
.box {
  height: 200px;
  width: 200px;
  background-color: skyblue;
}
</style>

利用钩子函数配合第三方库 gsap 使用

https://cn.vuejs.org/guide/built-ins/transition.html#javascript-hooks
https://greensock.com/

<template>
  <div>
    <el-button @click="flag = !flag" type="primary">switch</el-button>
    <Transition @before-enter="enterFrom" @enter="enterActive" @leave="leaveActive">
      <div v-if="flag" class="box"></div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from "vue";
import gsap from "gsap";
const flag = ref(true);
const enterFrom = (el) => {
  gsap.set(el, {
    width: 0,
    height: 0,
  });
};
const enterActive = (el, done) => {
  gsap.to(el, {
    width: 200,
    height: 200,
    onComplete: done,
  });
};
const leaveActive = (el, done) => {
  gsap.to(el, {
    width: 0,
    height: 0,
    onComplete: done,
  });
};
</script>

<style lang="scss">
.box {
  height: 200px;
  width: 200px;
  background-color: skyblue;
}
</style>

加上首次过渡效果

<template>
  <div>
    <el-button @click="flag = !flag" type="primary">switch</el-button>
    <Transition appear appear-from-class="from" appear-active-class="active" appear-to-class="to">
      <div v-if="flag" class="box"></div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from "vue";
const flag = ref(true);
</script>

<style lang="scss">
.box {
  height: 200px;
  width: 200px;
  background-color: skyblue;
}
.from {
  width: 0;
  height: 0;
}
.active {
  transition: all 2s ease;
}
.to {
  width: 200px;
  height: 200px;
}
</style>

配合animate.css使用

<template>
  <div>
    <el-button @click="flag = !flag" type="primary">switch</el-button>
    <Transition
      appear
      appear-active-class="animate__animated animate__backInDown"
      enter-active-class="animate__animated animate__backInDown"
      leave-active-class="animate__animated animate__bounceOutDown"
    >
      <div v-if="flag" class="box"></div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from "vue";
import "animate.css";
const flag = ref(true);
</script>

<style lang="scss">
.box {
  height: 200px;
  width: 200px;
  background-color: skyblue;
}
</style>