项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人说了,这些东西也可以不使用动画。

对,你说的没错可以不使用,但是,首先你要说服你的产品经理咱能不能简单点,不搞这么多虚的来点实际的,说完之后我估计你们俩得立马干起来,其次,在你的网页上不使用动画不够逼格啊,而且咱们的网页也不够生动,没有活力,由此可见动画的不可或缺性。

上面只是开个玩笑,下面咱们进入主题,看看 Vue 中如何更好更简单的添加动画。

首先,Vue 在插入,修改或者移除 DOM 时,提供了多种不同的添加动画的方法,在 Vue 中我们使用 <transition><transition-group> 组件时,Vue 会给我们提供一些内置的 CSS 类与 JS 钩子函数。

先来看看我们要实现一个什么样子的案例效果

图中的例子是一个非常常见的图片切换效果,不过在这个例子中我们只是单纯的实现图片的切换,看起来非常的生硬,没有任何的过渡效果,下面我们来给图片加一点动画的效果,让它看起来非常的有逼格。

CSS 过渡

<transition> 包裹的组件,在组件的不同阶段会产生不同的 class 类名进行切换

  • v-enter/v-leave:动画的第一帧
  • v-enter-acive/v-leave-active:动画运行的阶段,一些过渡属性会放置在这里,如:时间,延迟等
  • v-enter-to/v-leave-to:动画结束,最后一帧

官网上的一张图片非常友好的展示了这个切换的过程。

v- 是 Vue 中默认的类名前缀,我们在使用的过程中如果一直使用默认的命名方式的话,必然会导致一些冲突,所以 Vue 给我们提供了一个自定义命名的方案,我们只需要给 <transition> 添加一个 name 属性即可。

既然我们知道了方法,我们就来给它加一个简单的动画。

<template>
<ul class="tabs-list">
  <li 
    v-for="tab in tabs"
    :key="tab.id"
    :class="{active: tabOn === tab.id}" 
  >
    <a
      @mouseover="tabOn = tab.id"
      :href="tab.url" target="_blank"
    >
      {{tab.name}}
      <transition name="flip">
        <img v-show="tabOn === tab.id" :src="tab.imgUrl">
      </transition>
    </a>
  </li>
</ul>
<template>
<style lang="scss" scoped>
.flip-enter-active {
  transition: transform 1s;
}
.flip-leave-active {
  transition: transform 1s;
}
.flip-enter,
.flip-leave-to {
  transform: scaleY(0);
}
</style>

CSS 动画

与上面 CSS 过渡不同的是,我们这里说的 CSS 动画是利用 @keyframes 来创建与上面类似的动画效果。

<style lang="scss" scoped>
@keyframes scaleY-in {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}
.flip-enter-active {
  animation: scaleY-in 1s;
} .flip-leave-active {
  animation: scaleY-in 1s reverse;
}
</style>
使用第三方动画库

Vue 中给我们提供了自定义 CSS 类名的方法,非常好的支持了与第三方动画库的结合。

  • enter-class / leave-class
  • enter-active-class / leave-active-class
  • enter-to-class / leave-to-class

上面两个动画都是我们自己动手写出来的,但是有些时候我们自己手写的并不是那么完美,或者项目的时间比较紧张,这个时候选择第三方库就是一个比较好的方案。我们继续利用 Animate.css 动画库修改我们上面的例子。

<transition 
    name="flip"
    enter-active-class="animated rotateIn"
    leave-active-class="animated rotateOut"
>
    <img v-show="tabOn === tab.id" :src="tab.imgUrl">
</transition>

JavaScript 动画

Vue 中还给我们提供了一些钩子函数,我们可以使用 JavaScript 钩子函数构建动画。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"   @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false"
>
</transition>

所有钩子都会传入一个 el(元素)参数,enter/leave 函数还会传入一个 done 函数作为参数。它会告知我们的动画完成,我们绑定了 css 为 false,告诉组件跳过 CSS 的检测,使用 JavaScript。

我们结合 Velocity.js 动画,来修改完成我们的动画效果。

<transition 
    @enter="enter"
    @leave="leave"
    :css="false"
>
    <img v-show="tabOn === tab.id" :src="tab.imgUrl">
</transition>
<script>
methods: {
    enter(el, done) {
      Velocity(el, { scaleY: "0" });
      Velocity(el, { scaleY: "0.5" }, { duration: 1000 });
      Velocity(el, { scaleY: "1" }, { complete: done });
    },
    leave: function(el, done) {
      Velocity(el, { scaleY: "1" });
      Velocity(el, { scaleY: "0.5" }, { duration: 1000 });
      Velocity(el, { scaleY: "0" }, { complete: done });
    }
}
</script>
过渡模式

我们再来回头看看上面的例子,不管我们使用何种方式实现的动画,你会发现一个问题就是,动画在切换的时候两者(进入/离开)是同时进行的,有些时候,我们并不希望产生这种效果,对我们的动画效果非常的不友好,比如我们看看下面的这个例子。

<template>
<div class="translate-container" @click="clickHandler">
  <transition name="slide">
    <img v-if="isShow" src="./feature/03.jpg" key="first">
    <img v-else src="./feature/04.jpg" key="second">
  </transition>
</div>
</template>
<script>
export default {
  methods: {
    clickHandler() {
      this.isShow = !this.isShow;
    }
  }
}
</script>
<style lang="scss" scoped>
    .slide-enter-active,
    .slide-leave-active {
      transition: all 0.5s;
    }
    .slide-leave-to,
    .slide-enter {
      transform: scaleY(0);
    }
</style>

很显然,这种是非常不好的效果,值得高兴的是 Vue 中给我们提供了一个解决方案-- 过渡模式,我们不需要增加额外的代码,只需要修改下特性即可。

Vue 给我们提供了两种过渡模式。

  • in-out:新元素先进行过渡,完成之后当前元素过渡离开。
  • out-in:当前元素先进行过渡,完成之后新元素过渡进入

过渡模式只会在相互切换的元素中才会生效

<transition name="fade" mode="out-in"></transition>

<transition name="fade" mode="in-out"></transition>

下面我们就用过渡模式修改我们上面的案例。

<transition name="slide" mode="out-in">
    <img v-if="isShow" src="./feature/03.jpg" key="first">
    <img v-else src="./feature/04.jpg" key="second">
</transition>

总结

Vue 给我们提供了比较直观灵活的 API,方便我们在项目中添加动画的效果。

Vue 中除了这些单元素的动画以外还提供了<transition-group> 给我的列表(使用v-for 时的场景)添加动画,喜欢动画的小伙伴可以动手去尝试绘制一些自己喜欢的动画。

文中如有不足之处,欢迎留言指正,如果本文对你有帮助,欢迎转发点赞。

关注我的微信公众号:六小登登,更多干货文章,欢迎一起交流。
人人都可以成为高手。我是一个会技术,又写干货的码农。欢迎勾搭。

Vue一个案例引发「动画」的使用总结的更多相关文章

  1. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  2. Vue一个案例引发的递归组件的使用

    今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...

  3. Vue一个案例引发的动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...

  4. 一个「学渣」从零开始的Web前端自学之路

    从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...

  5. 一个只需要点 「下一步」就完成监控 Windows

    Cloud Insight 此前已然支持 Linux 操作系统,支持20多中数据库中间件等组件,多种操作,多种搭配,服务器监控玩的其乐无穷啊!但想想还有许多 Windows 的小伙伴没有体验过,所以在 ...

  6. spring cloud 入门,看一个微服务框架的「五脏六腑」

    Spring Cloud 是一个基于 Spring Boot 实现的微服务框架,它包含了实现微服务架构所需的各种组件. 注:Spring Boot 简单理解就是简化 Spring 项目的搭建.配置.组 ...

  7. 从 Spring Cloud 看一个微服务框架的「五脏六腑」

    原文:https://webfe.kujiale.com/spring-could-heart/ Spring Cloud 是一个基于 Spring Boot 实现的微服务框架,它包含了实现微服务架构 ...

  8. loj #2254. 「SNOI2017」一个简单的询问

    #2254. 「SNOI2017」一个简单的询问 题目描述 给你一个长度为 NNN 的序列 aia_ia​i​​,1≤i≤N1\leq i\leq N1≤i≤N,和 qqq 组询问,每组询问读入 l1 ...

  9. 从 Spring Cloud 看一个微服务框架的「五脏六腑」(转)

    Spring Cloud 是一个基于 Spring Boot 实现的微服务框架,它包含了实现微服务架构所需的各种组件. 本文将从 Spring Cloud 出发,分两小节讲述微服务框架的「五脏六腑」: ...

随机推荐

  1. Python面试真题第一节

    1.一行代码实现1--100之和 2.如何在一个函数内部修改全局变量 3.列出5个python标准库 4.字典如何删除键和合并两个字典 5.谈下python的GIL 6.python实现列表去重的方法 ...

  2. 美国5G:初步上线玩砸,信号难寻和4G无差别

    事件背景: 自从美国最高联邦法院给美国国会立法机关送去了传票之后,至今为止还暂时没有动静.传票限期两个月,不开庭就视为自动败诉,目前离最后的期限应该还有一个月的时间,静心等待结果就好. 不过这段时间, ...

  3. Redis面试题

    1.谈谈Redis的主从复制流程 有几个重点:主节点负责写,从节点负责读,slave node 主要用来进行横向扩容,做读写分离,扩容的 slave node 可以提高读的吞吐量.必须开启 maste ...

  4. Python爬虫入门教程 20-100 慕课网免费课程抓取

    写在前面 美好的一天又开始了,今天咱继续爬取IT在线教育类网站,慕课网,这个平台的数据量并不是很多,所以爬取起来还是比较简单的 准备爬取 打开我们要爬取的页面,寻找分页点和查看是否是异步加载的数据. ...

  5. C++中int与string的转化

    C++中int与string的转化 int本身也要用一串字符表示,前后没有双引号,告诉编译器把它当作一个数解释.缺省情况下,是当成10进制(dec)来解释,如果想用8进制,16进制,怎么办?加上前缀, ...

  6. 就算会用python画颗心,可你依然还是只单身狗

    :) 标题是开玩笑的,千万别认真. 随着AI的飞速发展,有志于此行的码农也是急剧的增加,带来的就是大家对算法.数学的兴趣也格外升高. 本文的来历是这样,今天某老同事在朋友圈发了一张屏拍,求公式. 看了 ...

  7. 你安装的是SUN/Oracle JDK还是OpenJDK?

    目录 1 如何查看你安装的JDK版本 1.1 要用到的命令行工具 1.2 查看JDK的版本 2 什么是 OpenJDK 2.1 OpenJDK 的来历 2.2 Oracle JDK的来历 3 Orac ...

  8. sql server 数据库创建链接服务器

    本文介绍在sql server中创建链接服务器访问sql server数据库. 方法: 打开SSMS,新建程序,执行下面sql语句块: EXEC sp_addlinkedserver @server= ...

  9. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->用户管理模块新增“重置用户密码”功能

    不管是什么系统登录用户都有忘记密码的时候,忘记密码就进入不了系统.系统应该可以提供重置用户密码的功能.在我们框架中重置用户密码功能一般用用户管理员来完成.当然如果做得复杂点还可以由用户自己来重置(如: ...

  10. 使用MaxCompute Java SDK运行安全相关命令

    使用MaxCompute Console的同学,可能都使用过MaxCompute安全相关的命令.官方文档上有详细的MaxCompute安全指南,并给出了安全相关语句汇总.   简而言之,权限管理.列级 ...