1. 首页
  2. 文章中心
  3. vue.js

Vue基础篇之过渡和动画1.Vue的过渡和动画总结代码

89 阅读 0 评论
我是靠谱客的博主 愤怒柚子，最近开发中收集的这篇文章主要介绍Vue基础篇之过渡和动画1.Vue的过渡和动画总结代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

  • 1.Vue的过渡和动画
    • 1.1过渡
      • 1.1.1、上下逐渐消失的过渡效果
      • 1.1.2、左右消失出现的过渡效果
      • 1.1.3、多元素的
      • 1.1.4、列表的过渡
    • 1.2、动画
      • 1.2.1、单一元素的
  • 总结
  • 代码

1.Vue的过渡和动画

意义：Vue 内置了 transition组件 用来实现动画和过渡
过渡（transform）和动画（animate）

  • transition不会被渲染成任何标签 在transition加name给动画命名
  • 使用transition组件提供的 name 来定义一些 class 控制的 过渡效果
  • 初始 | 过渡中 | 结束

1.1过渡

1.1.1、上下逐渐消失的过渡效果

出现的 第一帧

.fade-enter{
  opacity: 0;
}

出现正在进行的状态

.fade-enter-active{
   transition: opacity 0.5s
}

出现结束 就是元素默认出现的样子 一般可以不用设置

.fade-enter-to{
   opacity: 1;
}

离开时候的第一帧 就是元素默认出现的样子 一般可以不用设置

.fade-leave{
   opacity: 1;
}

离开正在进行的状态

.fade-leave-active{
    transition: opacity 0.5s
}

离开结束

.fade-leave-to{
   opacity: 0;
}
  • 创建点击事件
<template>
 <div>
  <h2>过渡和动画</h2>
  <!-- 创建点击事件-->
  <button @click="toggle">toggle</button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
 </div>
</template>

<script>
export default {
  data(){
    return{
    // hello 的初始状态
      show: true
    }
  },
  methods: {
    toggle(){
    // 每一次点击 toggle 结果都会取反
      this.show = !this.show
    }
  }
}
</script>

1.1.2、左右消失出现的过渡效果

出现的 第一帧

.move-enter{
  opacity: 0;
  transform: translateX(200px);
}

离开结束

.move-leave-to{
  opacity: 0;
  transform: translateX(-200px);
}

出现正在进行的状态与离开正在进行的状态

.move-enter-active, .move-leave-active{
  transition: all 1s;
}
  • 创建点击事件
<template>
 <div>
  <h2>过渡和动画</h2>
  <button @click="show1 = !show1">切换</button>
  <transition name="move">
    <button style="margin-left: 400px" v-show="show1">on</button>
  </transition>
 </div>
</template>

<script>
export default {
  data(){
    return{
      show1: true
    }
  },
</script>

1.1.3、多元素的

  • 对于多元素所有效果的时候需要给不同的
    • key=“xxx”
  • 多元素是同时执行的当他们同时出现的会出现卡顿，解决方法
    • 添加一个 mode=“out-in”
    • 先执行完前一个动画，在执行下一个动画

出现的 第一帧

.move-enter{
  opacity: 0;
  transform: translateX(200px);
}

离开结束

.move-leave-to{
  opacity: 0;
  transform: translateX(-200px);
}

出现正在进行的状态与离开正在进行的状态

.move-enter-active, .move-leave-active{
  transition: all 1s;
}
  • 创建点击事件
<template>
 <div>
  <h2>过渡和动画</h2>
 <div style="margin-left: 400px">
    <transition name="move" mode="out-in">
      <button key="on" @click="show3 = false" v-if="show3" >no</button>
      <button key="off" @click="show3 = true" v-else >off</button>
    </transition>
  </div>
 </div>
</template>

<script>
export default {
  data(){
    return{
      show3: true
    }
  },
</script>

在这里插入图片描述

1.1.4、列表的过渡

对于列表的过渡我们需要使用

  • transition-group 并且写上 name
  • 使用 tag=“规定渲染成什么标签”
  • :key 保证某一个key的值不重复

步骤一：定义函数

<script>
export default {
  data(){
    return{
      arr:[1,2,3,4,5]
    }
  },

步骤二：展示数组函数

<template>
<div>
  <!-- 列表过渡 -->
  <button @click="add">添加</button> 
  <button @click="del">删除</button> 
  <transition-group class="list" name="demo" tag="div">
    <span style="margin-left: 5px" v-for="i in arr" :key="i">{{i}}</span>
  </transition-group>
 </div>
</template>

步骤三：定义方法

<script>
export default {
。。。。。
    // 添加
    add(){
      this.arr.push(this.arr[this.arr.length - 1 ] +1)
      // this.arr.length 数组长度
      // 最大数组长度 this.arr.length - 1
    },
    // 删除
    del() {
      const random = Math.floor(Math.random()*(this.arr.length))
      // Math.random() 随机数 0，1的随机数
      // this.arr.length 为5 
      // Math.random()*(this.arr.length)  不包括0 不包括 5
      //  下于  Math.floor  包括 0-4
      this.arr.splice( random,1 )
      // 删除 一 数
    }
  }
}
</script>

步骤4：建立过渡效果

.list{
  display: flex;
  margin-left: 200px;
}

// 出现的 第一帧
.demo-enter {
  opacity: 0;
  transform: translateY(-50px);
}
// 结束离开
.demo-leave-to {
  opacity: 0;
  transform: translateY(50px);
}
// 过程时间
.demo-enter-active, .demo-leave-active{
  transition: all 1s;
}

1.2、动画

1.2.1、单一元素的

  • 1）导入动画文件：animate.min.css
  • 2）引入 main.js
import Vue from 'vue'
import App from './App.vue'

// 引入动画
import './assets/animate.min.css'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
  • 3）使用

对于动画：只有两个状态，一个是初始过程与结束过程

初始过程

.jump-enter-active {
            // 动画名  持续时间
  animation:backInDown 1s linear;
}

结束过程

.jump-leave-active {
  animation:bounceOutUp 1s linear;
}
  • 创建点击事件
<template>
 <div>
  <h2>过渡和动画</h2>
  <!-- 动画-->
  <button @click="show2 = !show2">切换</button>
  <transition name="jump">
    <button style="margin-left: 400px" v-show="show2">唱，跳，rep，篮球</button>
  </transition>
 </div>
</template>

<script>
export default {
  data(){
    return{
      show2: true
    }
  },
</script>

在这里插入图片描述

总结

  • 谁要进行动画给谁加：transition并且对它使用 name进行命名

  • 需要注意动画只有两个状态

    • 出现过程：xxxx-enter-active
    • 消失过程：xxxx-leave-active
    • 对于动画：需要使用 animation来导入动画

  • 谁要进行过渡给谁加：transition并且对它使用 name进行命名

  • 出现：xxxx-enter

    • -active 为过程
    • -to 为 结束

  • 消失：xxxx-leave

    • -active 为过程
    • -to 为 结束

注意：出现结束的状态（xxxx-enter-to）与离开时候的第一帧（xxxx-leave） 一般可以不设置

  • 对于多元素的过渡 需要使用不同的 key 以及 mode 去设置模式
  • 对于 列表的过渡需要使用：
    • transition-group 并且写上 name
    • 使用 tag=“规定渲染成什么标签”
    • :key 保证某一个key的值不重复

过渡与动画的区别：
1.谁用transform谁是过渡，谁用animation谁是动画
2.动画只有两帧 开始过程的帧与结束过程的帧

代码

<template>
 <div>
  <h2>过渡和动画</h2>
  <button @click="toggle">toggle</button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
  <button @click="show1 = !show1">切换</button>
  <transition name="move">
    <button style="margin-left: 400px" v-show="show1">on</button>
  </transition>
  <br>
  <button @click="show2 = !show2">切换</button>
  <transition name="jump">
    <button style="margin-left: 400px" v-show="show2">唱，跳，rep，篮球</button>
  </transition>
  <br>
  <div style="margin-left: 400px">
    <transition name="move" mode="out-in">
      <button key="on" @click="show3 = false" v-if="show3" >no</button>
      <button key="off" @click="show3 = true" v-else >off</button>
    </transition>
  </div>
  <br>
  <!-- 列表过渡 -->
  <button @click="add">添加</button> 
  <button @click="del">删除</button> 
  <transition-group class="list" name="demo" tag="div">
    <span style="margin-left: 5px" v-for="i in arr" :key="i">{{i}}</span>
  </transition-group>
  <hr>
  
 </div>
</template>

<script>
export default {
  data(){
    return{
      show: true,
      show1: true,
      show2: true,
      show3: true,
      arr:[1,2,3,4,5]
    }
  },
  methods: {
    toggle(){
      this.show = !this.show
    },
    add(){
      this.arr.push(this.arr[this.arr.length - 1 ] +1)
    },
    del() {
      const random = Math.floor(Math.random()*(this.arr.length))
      this.arr.splice( random,1 )
    }
  }
}
</script>

<style>
/* 刚刚开始时 */
.fade-enter{
  opacity: 0;
}
/* 出现的过程 */
.fade-enter-active{
   transition: opacity 0.5s
}
/* 结束的过程 */
.fade-leave-active{
    transition: opacity 0.5s
}
/* 结束完成 */
.fade-leave-to{
   opacity: 0;
}

.move-enter{
  opacity: 0;
  transform: translateX(200px);
}

.move-leave-to{
  opacity: 0;
  transform: translateX(-200px);
}

.move-enter-active, .move-leave-active{
  transition: all 1s;
}

.jump-enter-active {
  animation:backInDown 1s linear;
}

.jump-leave-active {
  animation:bounceOutUp 1s linear;
}

.list{
  display: flex;
  margin-left: 200px;
}

.demo-enter {
  opacity: 0;
  transform: translateY(-50px);
}

.demo-leave-to {
  opacity: 0;
  transform: translateY(50px);
}

.demo-enter-active, .demo-leave-active{
  transition: all 1s;
}
</style>

最后

以上就是愤怒柚子为你收集整理的Vue基础篇之过渡和动画1.Vue的过渡和动画总结代码的全部内容，希望文章能够帮你解决Vue基础篇之过渡和动画1.Vue的过渡和动画总结代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(59)

相关文章

Vant UI + Vue + Cli3.0 + Rem移动端项目搭建
Vant UI + Vue + Cli3.0 + Rem移动端项目搭建
npm发布自己的组件包通过命令的方式生成
npm发布自己的组件包通过命令的方式生成
模仿element-ui封装vue组件库（六）
模仿element-ui封装vue组件库（六）
vue过渡动画实现原理
vue过渡动画实现原理
Vue基础篇之过渡和动画1.Vue的过渡和动画总结代码
Vue基础篇之过渡和动画1.Vue的过渡和动画总结代码
vue登录之后显示个人信息
vue登录之后显示个人信息
vue过渡动画
vue过渡动画
vue+vant 移动端H5 商城项目_04
vue+vant 移动端H5 商城项目_04

评论列表共有 0 条评论

立即
投稿
返回
顶部