官方文档：https://cn.vuejs.org/v2/guide/transitions.html

一、使用过度类名

没有使用动画之前：

<body>

<div id="app">

    <input type="button" value="切换" @click="flag=!flag"/>

    <h4>{{flag}}</h4>

</div>

<script>

  var vm = new Vue({

      el:'#app',

      data:{

          flag:false

      }

  })

</script>

</body>

来吧展示：



使用动画之后：

  1. 把要实现动画的元素，使用 transition 元素包裹起来
  2. 要实现动画的元素，必须使用 v-if 或 v-show 来进行控制
<input type="button" value="切换" @click="flag=!flag"/>

<transition>

   <h4 v-show="flag">{{flag}}</h4>

</transition>
  1. 添加过度动画的类名
<style>

.v-enter,

.v-leave-to {

 opacity:0;

 transform:translateX(100px);

 }

.v-enter-active,

.v-leave-active{

 transition: all 0.5s ease;

 }

</style>

来吧展示：

二、vue结合第三方css动画样式库

animate官网：https://animate.style/

安装

  1. 在官网直接下载文件
  2. 通过 npm 安装
$ npm install animate.css --save

使用

  1. 导入第三方动画样式文件
<link rel="stylesheet" href="../lib/animate.css">
  1. 在vue提供的trisition标签中添加自带的动画入场和出场的属性
  2. 添加animate样式库的动画样式值
  3. 给要做动画的标签（这里是h3）添加animate做动画的类
 <!--    enter-active-class  动画入场的时候的动画类名-->

<!--    leave-active-class动画出场时候的动画类名-->

<transition enter-active-class="animate__bounceInDown" leave-active-class="animate__bounceOutDown">

    <h3 v-show="flag" class="animate__animated">哈哈哈哈哈哈哈</h3>

</transition>

来吧展示：

三、动画钩子函数实现小球半场动画

<style>

        .ball{

            width: 30px;

            height: 30px;

            background-color: red;

            border-radius: 50%;

        }

</style>


<body>

<div id="app">

    <input type="button" value="加入购物车" @click="flag=!flag"/>

    <transition

            @before-enter="beforeEnter"

            @enter="enter"

            @after-enter="afterEnter">

        <div v-show="flag" class="ball"></div>

    </transition>

</div>

<script>

    var vm = new Vue({

        el:'#app',

        data:{

            flag:false

        },

        methods:{

            beforeEnter(el){//小球开始动画之前的起始状态

           // el标识的是绑定动画的元素这里是小球的<div>

                el.style.transform = 'translate(0,0)'

            },

            enter(el,done){// 小球动画结束之后的结束状态

                el.offsetWidth

               //el.offsetHeight/el.offsetLeft/el.offsetRight都可以实现动画效果

              // 这是固定写法，如果不写 el.offsetWidth 就无法实现动画效果，小球直接到结束状态，中间看不到动画效果

                el.style.transform = 'translate(150px,200px)'

                el.style.transition = 'all 1s ease'

                 // 当动画执行完毕后，会自动调用 done 这个函数，这个done 就是 afterEnter 函数的引用

                done()

                //调这个函数的作用是当小球结束了再次点击加入车能够再次执行动画

            },

            afterEnter(el){// 小球动画结束之后的回调函数，用来做一些清理工作

          // 通过取非的操作，直接让小球跳过了后半场的动画

                this.flag = !this.flag

            }

        }

    })

</script>

</body>

来吧展示：

四、列表动画

基本样式：

  <style>

        ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        li {

            line-height: 30px;

            border: 1px dashed #ccc;

            margin: 5px;

            font-size: 14px;

            padding-left: 10px;

            width: 500px;

            cursor: pointer;

        }

        li:hover {

            background-color: orange;

            box-shadow: 0 0 7px gray;

        }

    </style>


<body>

<div id="app">

    <ul>

        <li v-for="item in list">{{item.id}}  ------ {{item.name}}</li>

    </ul>

</div>

<script>

    var vm = new Vue({

        el:'#app',

        data:{

            list: [

                { id: 1, name: '黄焖鸡'},

                { id: 2, name: '烤鱼'},

                { id: 3, name: '鸭血粉丝'},

                { id: 4, name: '大碗米线'},

                { id: 5, name: '螺蛳粉'},

                { id: 6, name: '鱼香肉丝'},

            ]

        }

    })

</script>

</body>

来吧展示：



实现删除功能

<ul>

  <li v-for="(item, i) in list"  @click="del(i)">{{item.id}}  ------ {{item.name}}

  </li>

</ul>


methods:{

     del(i){

        this.list.splice(i,i)

         }

  }

来吧展示：

实现删除动画

<style>

.....

        .v-enter,

        .v-leave-to{

            opacity: 0;

            transform: translateY(200px);

        }

        .v-enter-active,

        .v-leave-active{

            transition: all 0.5s ease;

        }

</style>


<div id="app">

        <transition-group tag="ul">

<!--因为transition-group默认被渲染的成sapn，但是行内元素不能再套块级元素，不符合css3规范，所以将ul移除，然后给transition-group添加tag="ul"-->

            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">{{item.id}}  ------ {{item.name}}</li>

 <!--在transition-group中被v-for包裹的循环元素必须绑定:key=""属性-->

        </transition-group>

</div>

来吧展示：



实现删除列表时，让下面的元素慢慢上去，有过度效果，变得没有那么生硬

<style>

.....

        .v-move { /* 让元素被改变定位的时候，有一个缓动的效果 */

            transition: all 0.5s ease;

        }

        .v-leave-active {

            position: absolute;

        /* 表示要被删除的那个元素， 让即将被移除的元素，脱离标准流

        这样，后面的元素就能渐渐的浮动上来了

        也就是说页面上的li属于流式布局,那怕做动画效果,li也会占领自己的区域

        如果说为将要删除的元素添加position:absolute那么就脱离了标准流,就不会再占位置了

        后面的元素就会慢慢票上去 */

    }

</style>

来吧展示：



实现添加功能：

<div>

      Id：<input type="text" v-model="id">

      Name：<input type="text" v-model="name">

      <input type="button" value="添加" @click="add">

    </div>


data:{

     id:'',

     name:'',

     list: [

     ......

      ]

    }


add(){

  const p = { id: this.id, name: this.name }

  //往后追加

  this.list.push(p)

  //往前追加

  //this.list.unshif(p)

  this.id = this.name = ''

 }

来吧展示：

vue学习笔记（五）---- vue动画的更多相关文章

  1. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  2. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  3. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  4. Vue学习笔记(五)——配置开发环境及初建项目

    前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...

  5. vue学习笔记(五)条件渲染和列表渲染

    前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...

  6. Vue学习笔记五：事件修饰符

    目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...

  7. vue学习笔记(五)：对于vuex的理解 + 简单实例

    优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...

  8. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  9. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  10. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

随机推荐

  1. JetBrains新产品Aqua——自动化测试开发工具（抢鲜体验）

    转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/9a093c88.html 你好,我是测试蔡坨坨. 随着行业内卷越来越严重,自动化测试已成为测试工程师的必备技能,谈及自动化测 ...

  2. Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包

    该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 ...

  3. 深度学习之深L层神经网络

    声明 本文参考(8条消息) [中文][吴恩达课后编程作业]Course 1 - 神经网络和深度学习 - 第四周作业(1&2)_何宽的博客-CSDN博客 力求自己理解,刚刚走进深度学习希望可以一 ...

  4. [排序算法] 双向冒泡排序 (C++)

    前言 本文章是建立在冒泡排序的基础上写的,如还有对 冒泡排序 不了解的童鞋,可以看看这里哦~ 冒泡排序 C++ 双向冒泡排序原理 双向冒泡排序 的基本思想与 冒泡排序还是一样的.冒泡排序 每次将相邻的 ...

  5. C#微信公众号关注二维码生成、密文方式

    文章说明:是公众号使用自己服务器的处理的其中一篇关注二维码信息处理 1.流程 1.1 需知  全局返回码:这个必须要哦.不然调试的时候接口出的错误怎么处理呢. (闲话:博客的随笔只能添加也给超链呀,‍ ...

  6. 交叉编译：zlib，openSSL，openSSH

    1. 编译zlib wget https://www.zlib.net/zlib-1.2.12.tar.gz # 编译命令 export CC=arm-fullhanv3-linux-uclibcgn ...

  7. 第2-4-1章 规则引擎Drools介绍-业务规则管理系统-组件化-中台

    目录 规则引擎 Drools 1. 问题引出 2. 规则引擎概述 2.1 什么是规则引擎 2.2 使用规则引擎的优势 2.3 规则引擎应用场景 2.4 Drools介绍 规则引擎 Drools 全套代 ...

  8. table 动态隐藏tr行

    table: <table style="width:100%" class="table01" cellspacing="1" ce ...

  9. 【2022-11-28】Docker部署搭建Gitlab

    一.环境准备 1. 准备一台虚拟机\或者购买服务器 2. 虚拟机硬件要求 2.1 内存不得少于4G,否则启动会报502错误,可自行百度解决,将虚拟机的swap分区调整为2G大小即可 2.2 CPU2核 ...

  10. mingw+CLion环境下在Windows下编译配置并使用opencv

    目录 安装(mingw环境) 在项目中使用opencv QtCreator使用opencv 安装(mingw环境) vs环境没配过不知道 下载地址 解压到目标目录     解压后的目录结构(build ...