vue学习笔记（五）---- vue动画
官方文档：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>
来吧展示：
使用动画之后：
- 把要实现动画的元素，使用 transition 元素包裹起来
- 要实现动画的元素，必须使用 v-if 或 v-show 来进行控制
<input type="button" value="切换" @click="flag=!flag"/>
<transition>
<h4 v-show="flag">{{flag}}</h4>
</transition>
- 添加过度动画的类名
<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/
安装
- 在官网直接下载文件
- 通过
npm安装
$ npm install animate.css --save
使用
- 导入第三方动画样式文件
<link rel="stylesheet" href="../lib/animate.css">
- 在vue提供的
trisition标签中添加自带的动画入场和出场的属性 - 添加animate样式库的动画样式值
- 给要做动画的标签（这里是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动画的更多相关文章
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- Vue学习笔记(五)——配置开发环境及初建项目
前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- Vue学习笔记五：事件修饰符
目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...
- vue学习笔记(五)：对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
随机推荐
- Python基础部分：8、for循环和range的使用
目录 一.while循环补充说明 1.死循环 2.嵌套及全局标志位 二.for...循环 1.for...循环特点 2.for...循环语法结构 三.range方法 1.什么是range 2.不同版本 ...
- @confirguration（proxyBeanMethods = false）的作用，如何选择Full模式和Lite模式
@Configuration(proxyBeanMethods = false) //告诉SpringBoot这是一个配置类 == 配置文件 public class MyConfig { @Bean ...
- 谷歌浏览器xpath获取网页按钮路径
谷歌浏览器打开要获取的页面按下F12打开开发者工具 点击最左边的元素选择器,高亮后光标移动到对应元素框(这里只选择里层的元素,如这里要选到input级别) 点击后下方HTML会高亮显示,鼠标移动上去右 ...
- Unreal NetMode&NetRole 解析
Version: Unreal 4.26 问题 为啥UE编辑器会有EPlayNetMode有三种让你选择. 为啥描述World 的ENetMode 会有4种,而不只是(Client/Server 2种 ...
- 论文笔记 - SIMILAR: Submodular Information Measures Based Active Learning In Realistic Scenarios
motivation Active Learning 存在的重要问题:现实数据极度不平衡,有许多类别很少见(rare),又有很多类别是冗余的(redundancy),又有些数据是 OOD 的(out- ...
- 机器学习中in-domine, out-domine的区别
in-domine 为域内数据,即为训练模型时使用的数据: out-domine 为域外数据,即为检验模型时使用的数据.
- 重大发现，AQS加锁机制竟然跟Synchronized有惊人的相似
在并发多线程的情况下,为了保证数据安全性,一般我们会对数据进行加锁,通常使用Synchronized或者ReentrantLock同步锁.Synchronized是基于JVM实现,而Reentrant ...
- WCF实现大文件上传
一.文件服务接口 1.文件上传 2.文件传输(上传按钮) 3.文件传输停止 服务地址: 在客端添加服务器引用,从而实现客户端调用服务器的功能. 二.契约 服务契约[ServiceContract]:定 ...
- Android网络请求(3) 网络请求框架OkHttp
Android网络请求(3) 网络请求框架OkHttp 本节我们来讲解OkHtpp网络请求框架 什么是网络请求框架 在我的理解中,网络请求框架是为了方便我们更加便捷规范的进行网络请求所建的类,我们通过 ...
- 推荐一款 .NET 编写的 嵌入式平台的开源仿真器--Renode
Renode 是一个开发框架,通过让你模拟物理硬件系统来加速物联网和嵌入式系统开发. Renode 可以模拟 Cortex-M.RISC-V 等微控制器,不仅可以模拟 CPU指令,还可以模拟外设,甚至 ...