Vue学习之动画小结（六）
一、Vue中实现动画的方式：https://cn.vuejs.org/v2/guide/transitions.html
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
二、使用过渡类名实现动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=
, initial-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>donghua</title>
<link rel="stylesheet" href="./lib/animate.css" />
<style>
/* 2.自定义两组样式，来控制 transition 内部的元素实现动画 */
/* v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了*/
.v-enter,
.v-leave-to {
opacity: 0;
/* 沿着X轴 */
/* transform: translateX(150px); */
/* 沿着Y轴 */
transform: translateY(150px);
}
/*v-enter-active【入场动画的时间段】 */
/* v-leave-active【离场动画的时间段】 */ .v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
}
</style>
</head> <body>
<script src="./lib/vue.js"></script>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag" />
<!-- 需求：点击按钮，让H3显示，再点击，让H3隐藏 -->
<!-- 1、使用 transition 元素，把需要被动画控制的元素，包裹起来 -->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
</div> <script>
var vm = new Vue({
el: "#app",
data: {
flag: false
}
});
</script>
</body>
</html>
三、使用animate.css类实现动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=
, initial-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>donghua</title>
<link rel="stylesheet" href="./lib/animate.css" />
</head> <body>
<script src="./lib/vue.js"></script>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag" />
<!-- 使用 :duration="{ enter :200, leave: 400}"来分别设置 入场的时长和 离场的时长 -->
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter :200, leave: 400}"
>
<h3 v-if="flag" class="animated">这是一个H3</h3>
</transition>
</div> <script>
var vm = new Vue({
el: "#app",
data: {
flag: false
}
});
</script>
</body>
</html>
四、使用钩子函数：
可以在属性中声明 JavaScript 钩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>donghua</title>
<style>
/* 定义动画小球 */
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head> <body>
<script src="./lib/vue.js"></script>
<div id="app">
<input type="button" value="从碗里出去" @click="flag=!flag" />
<!-- 1.使用 transition 元素把 小球包裹起来 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="flag"></div>
</transition>
</div> <script>
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {
//动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的JS DOM对象
//大家可以认为，el是通过docunment.getElementById('')方式获取到的原生JS DOM对象
beforeEnter(el) {
//beforeEnter 表示动画入场之前，此时，动画尚未开始，可以在其中设置元素开始动画之前的起始样式
// 设置小球开始动画之前的起始位置
el.style.transform = "translate(0,0)";
},
enter(el, done) {
// 这句话没有实际的作用，但是如果不写，出不来动画效果；
//可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth;
//enter 表示动画开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px,450px)";
el.style.transition = "all 1s ease";
//这里的 done，起始就是 afterEnter 这个函数，也就是说 done 是 afterEnter 函数的引用
done();
},
afterEnter(el) {
//动画完成后，会调用 afterEnter
// console.log("ok");
//这句话，第一个功能就是控制小球的显示与隐藏；
//第二个功能：直接跳过后半场动画，让flag 标识符 直接变为 false;
//当第二次再点击 按钮的时候，flag： false---> true this.flag = !this.flag;
//Vue把一个完整的动画，使用钩子函数，拆分为了两部分：
//我们使用flag 标识符，来表示动画的切换flag: false--> true -->false
}
}
});
</script>
</body>
</html>
<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>
Vue学习之动画小结（六）的更多相关文章
- vue学习指南：第六篇(详细) - Vue的组件 component
1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标 ...
- Vue学习计划基础笔记(六) - 组件基础
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...
- Vue学习之路第六篇：v-on
v-on指令用来触发页面事件的指令. <body> <div id="app"> <button v-on:click="show()&qu ...
- Vue学习之Webpack小结（十二）
一.nrm: nrm是专门用来管理和快速切换私人配置的registry; nrm提供了一些最常用的npm包镜像地址,能够让我们快速的切换安装包时候的服务器地址: 二.镜像: 原来 包 刚一开 ...
- Vue学习之vue-resource小结（五）
一.Vue实现数据交互的方式: 1.Vue除了vue-resource之外,还可以使用‘axios’的第三方包实现数据的请求: 2.常见的数据请求类型有: get.post.jsonp 3.JSONP ...
- day 84 Vue学习六之axios、vuex、脚手架中组件传值
Vue学习六之axios.vuex.脚手架中组件传值 本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue过渡动画—Vue学习笔记
要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
随机推荐
- wordpress怎么用AMP加速器呢
AMP项目(Accelerated Mobile Pages)是一个开放源代码计划,旨在为所有人打造更好的网络体验.借助该项目,用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精 ...
- HTTP协议之chunk,单页应用这样的动态页面，怎么获取Content-Length的办法
当客户端向服务器请求一个静态页面或者一张图片时,服务器可以很清楚的知道内容大小,然后通过Content-Length消息首部字段告诉客户端需要接收多少数据.但是如果是动态页面等时,服务器是不可能预先知 ...
- NOIP 2006 明明的随机数
洛谷 P1059 明明的随机数 洛谷传送门 JDOJ 1423: [NOIP2006]明明的随机数 T1 JDOJ传送门 Description 明明想在学校中请一些同学一起做一项问卷调查,为了实验的 ...
- 【java异常】Parsing error was found in mapping #{}. Check syntax #{property|(expression), var1=value1, var2=val
在增删改查的过程中有一个#{ }没有填写
- java 多态调用
1. 调用成员变量:编译.运行都看左边.2. 调用成员方法:编译看左边,运行看右边. ---------- instanceof 判断某个对象是否属于某种数据类型: boolean b = 对 ...
- ESA2GJK1DH1K升级篇: IAP详解
前言: 源码下载链接: https://gitee.com/yang456/STM32_IAP_Learn.git 后期所有出售的升级程序皆在此代码之上进行优化和开发 请必须把此文章各个的地方的说明看 ...
- contest2 CF989 div2 ooox? ooox? oooo?
题意 div2C (o) 在\(小于50*50\)的棋盘上放\(A, B, C, D\)四种花, 并给出每种花的连通块数量\(a, b, c, d(\le 100)\), 输出一种摆法 div2D ( ...
- 请写出jQuery绑定事件的方法，不少于两种
bind on live one 简写事件:click.hover.mousemove.mouseup.mousedown……
- cf1179D
cf1179D 链接 cf 思路 csdn 很玄学,正解是斜率优化dp,但被一个奇妙的贪心过了. 代码 #include <bits/stdc++.h> #define ll long l ...
- 【luoguP1382】楼房
题目描述 离散化,线段树维护区间修改,发现询问都是单点的\(max\),不妨把标记留在点上,不用下传,查询时取个\(max\)就可以了 #include<algorithm> #inclu ...