Vue 04.过渡&动画

过渡&动画

vue文档-过渡&动画

为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;

使用过渡类名

  1. HTML结构:
<div id="app">
    <input type="button" value="动起来" @click="myAnimate">
    <!-- 使用 transition 将需要过渡的元素包裹起来 -->
    <!-- 如果 transition 标签没有name熟悉,则默认使用 v-enter 等 -->
    <transition name="fade">
      <div v-show="isshow">动画哦</div>
    </transition>
</div>
  1. VM 实例:
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    isshow: false
  },
  methods: {
    myAnimate() {
      this.isshow = !this.isshow;
    }
  }
});
  1. 定义两组类样式:
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
/* v-enter 【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后,离开的终止状态,此时,元素 动画已经结束了 */
.fade-enter,  /* fade开头是transition标签name属性定义的 */
.fade-leave-to {
	opacity: 0;
  transform: translateX(100px);
}

/* 定义进入和离开时候的过渡状态 */
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.fade-enter-active,
.fade-leave-active {
	transition: all 0.2s ease;
  position: absolute;
}

使用第三方动画库

使用第三方 CSS 动画库

  1. 导入动画类库:
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
  1. 定义 transition 及属性:

animated 类可以加在被包裹的标签或transition类中 ,加在transition类中时需要加在每一个class中

使用 :duration=“毫秒值” 来统一设置 入场 和 离场 时候的动画时长

使用 :duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长

<transition
	  enter-active-class="fadeInRight"
    leave-active-class="fadeOutRight"
    :duration="{ enter: 500, leave: 800 }">
    
  	<div class="animated" v-show="isshow">动画哦</div>
</transition>

使用动画钩子函数

<transition
  // 入场
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  
  // 离场
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

模拟一个加入购物车的动画,点击按钮一个小球从0,0的位置进入另一个位置然后消失

  1. 定义 transition 组件以及三个钩子函数:
<div id="app">
  <input type="button" value="快到碗里来" @click="flag=!flag">
  <!-- 使用 transition 元素把 小球包裹起来 -->
  <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
    <div class="ball" v-show="flag"></div>
  </transition>
</div>
  1. 定义三个 methods 钩子方法:
methods: {
    // 动画钩子函数的第一个参数:el,表示要执行动画的那个DOM元素,是个原生JS的DOM对象
    // 可以理解为 el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
  
    beforeEnter(el) {
        // beforeEnter 表示动画入场之前,此时,动画尚未开始,可以在 beforeEnter 中,设置元素开始动画之前的起始样式
        // 设置小球开始动画之前的,起始位置
        el.style.transform = "translate(0, 0)"
    },
    enter(el, done) {
        // enter 表示动画开始之后的样式
      
        el.offsetWidth  // 如果不写,出不来动画效果;可以认为 el.offsetWidth 会强制动画刷新
        // 设置小球完成动画之后的结束状态
        el.style.transform = "translate(150px, 450px)"
        el.style.transition = 'all 1s ease'

        // done其实就是 afterEnter 这个函数,也就是说done是 afterEnter 函数的引用
        done()
    },
    afterEnter(el) {
        // 动画完成之后,会调用 afterEnter
        this.flag = !this.flag  // 设置隐藏小球即可
    }
}
  1. 定义动画过渡时长和样式:
.ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
    }

v-for 的列表过渡

  1. 定义过渡样式:
<style>
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(10px);
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 0.3s ease;
    }
</style>
  1. 定义DOM结构,需要使用 transition-group 组件把v-for循环的列表包裹起来:
  • 在实现列表过渡时,如果需要过渡的元素是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup
  • 给 ransition-group 添加 appear 属性,实现页面刚展示出来时入场的效果
  • 为 transition-group 元素设置 tag 属性,指定 transition-group 渲染为指定的元素,不指定时默认渲染为 span 标签
<div id="app">
  <input type="text" v-model="txt" @click="add">

  <transition-group appear tag="ul" name="list">
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
    <!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个元素设置 :key 属性 -->
  </transition-group>
</div>
  1. 定义 VM中的结构:
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
	el: '#app',
	data: {
		txt: '',
		list: [1, 2, 3, 4]
	},
	methods: {
		add() {
      this.list.push(this.txt);
      this.txt = '';
		}
	}
});

列表的排序过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用eg:删除上面的行,下面的行会渐渐的飘上来

  • v-movev-leave-active 结合使用,能够让列表的过渡更加平缓柔和:
.v-move{
  transition: all 0.8s ease;
}
.v-leave-active{
  position: absolute;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 05.组件

    组件: 组件是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块...

    LittlePanger
  • vue中js全局鼠标点击弹出文字

    在原作者代码的基础上进行修改,将内容放入数组,可按序显示或随机展示 增加userSelect样式,快速点击时文字不会被选中 可以使用Emoji ??????...

    LittlePanger
  • LeetCode-二分查找

    二分查找也称为折半查找,每次都能将查找区间减半,这种折半特性的算法时间复杂度为 O(logN)。

    LittlePanger
  • 从零开始学 Web 之 Vue.js(五)Vue的动画

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin
  • 机器人系统设计与控制技术作业和考核说明

    请先阅读,开始学习机器人~https://zhuanlan.zhihu.com/learn-robotics~

    zhangrelay
  • 基于Django的电子商务网站开发(连载31)

    (2)修改一个当前登录用户已经存在的地址信息,系统应该报“这个地址已经存在!”的错误信息。

    小老鼠
  • JavaIO-FileReader类、FileWriter类

    FileWriter 类从 OutputStreamWriter 类继承而来。该类按字符向流中写入数据。可以通过以下几种构造方法创建需要的对象。

    用户5224393
  • Android开发中基础动画技巧的应用 原

            我是先入门iOS的移动开发者,提到动画开发,iOS开发者很容易联想到3种方式,UIImageView的帧动画,UIView层的属性动画和Core...

    珲少
  • 5分钟快速实现Android爆炸破碎酷炫动画特效的示例

    先来看下是怎样的动效,要是感觉不是理想的学习目标,就跳过,避免浪费大家的时间。��

    砸漏
  • 关于IT培训机构的个人看法

    缘分与巧合,最近接触比较多的培训机构出来的人,以及看过关于培训机构的文章和问答。虽然没在培训机构上过课,但是接触过很多培训机构出来的人,也看过一些培训机构的课程...

    守候i

扫码关注云+社区

领取腾讯云代金券