当前位置：首页 > article >正文

Vue3新组件transition(动画过渡）

article 2024/9/23 2:40:37

transition组件：控制V-if与V-show的显示与隐藏动画

1.基本使用

<template>
  <div>
    <button @click="falg = !falg">切换</button>
    <transition name="fade" :enter-to-class="etc">
      <div v-if="falg" class="box ">box1</div>
      <div v-else class="box2">box2</div>
    </transition>
  </div>
</template>

<script>
const falg = ref(true)
</script>

样式动画

<style scoped>
.box {
  width: 200px;
  height: 200px;
  text-align: center;
  background-color: red;
  line-height: 200px;

}

.box2 {
  text-align: center;
  line-height: 200px;
  width: 200px;
  height: 200px;
  color: white;
  background-color: black;
}
/* 插入的新元素初始的样式 */
.fade-enter-from {
  width: 0;
  height: 0;
  color: white;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 5s ease;
}

/* 出入的新的元素的结束的样式 */
.fade-enter-to {
  width: 200px;
  height: 200px;
  transform: translateY(-200px);
  /* background: black; */
}
/* 移除旧元素的结束的样式 */
.fade-leave-to {
  width: 200px;
  height: 200px;
  background: white;
}
</style>

2.appear属性

在进入页面时就会触发enter-from到enter-to的动画

<template>
  <div>
    <button @click="falg = !falg">切换</button>
    <transition appear name="fade" :enter-to-class="etc">
      <div v-if="falg" class="box ">box1</div>
      <div v-else class="box2">box2</div>
    </transition>
  </div>
</template>

3.小案例-按钮切换滚动

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

const docState = ref('saved')
</script>

<template>
	<span style="margin-right: 20px">Click to cycle through states:</span>
  <div class="btn-container">
		<Transition name="slide-up">
      <button v-if="docState === 'saved'"
              @click="docState = 'edited'">Edit</button>
      <button v-else-if="docState === 'edited'"
              @click="docState = 'editing'">Save</button>
      <button v-else-if="docState === 'editing'"
              @click="docState = 'saved'">Cancel</button>
    </Transition>
  </div>
</template>

<style>
.btn-container {
  display: inline-block;
  position: relative;
  height: 1em;
}

button {
  position: absolute;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>

4.配合animate.css动画库使用

4.1下载安装animate依赖包

npm install animate.css -S

yarn add animate.css -S

4.2在使用的组件中导入

import 'animate.css';

4.3结合transition使用animate动画库

<script setup>
import 'animate.css';
const falg = ref(true)
</script>
<template>
  <div style="margin-top: 500px;">
    <button @click="falg = !falg">切换</button>
    <transition name="fade" :enter-to-class="etc">
      <h1 v-if="falg">
        <div class="box animate__animated animate__bounce">你好</div>
      </h1>
      <h1 v-else>
        <div class="box2 animate__animated animate__fadeInLeft">你好</div>
      </h1>
    </transition>
  </div>
  <div class="box2 animate__animated animate__hinge">你好</div>
</template>
<style scoped>
.box {
  width: 200px;
  height: 200px;
  text-align: center;
  background-color: red;
  line-height: 200px;

}

.box2 {
  text-align: center;
  line-height: 200px;
  width: 200px;
  height: 200px;
  color: white;
  background-color: black;
}

</style>