VUE—从入门到飞起（三）
2024-06-03 02:09:00
目录
动画
显示隐藏（不使用动画）
使用过渡类名
使用第三方类animate.css实现动画
使用钩子函数模拟小球半场动画
列表动画
VUE—从入门到飞起（一）
VUE—从入门到飞起（二）
VUE—从入门到飞起（三）
VUE—从入门到飞起（四）
VUE—从入门到飞起（五）
动画
显示隐藏（不使用动画）
<body><div id="app"><!--需求：点击按钮，让h3显示，再点击隐藏--><button @click="flag = !flag">显示隐藏</button><h3 v-show="flag">这是一个h3</h3></div>
</body>
<script>var vm = new Vue({el:"#app",data:{flag : false},methods:{}})
</script>使用过渡类名
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>过渡类名1</title><script src="../../../thirdlib/vue/vue.js"></script><style>/* v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*//* v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了*/.v-enter,.v-leave-to{opacity: 0;transform: translateX(80px);}/*v-enter-active 【入场动画的时间段】 *//*v-leave-active 【离场动画的时间段】 */.v-enter-active,.v-leave-active{transition: all 0.8s ease;}</style></head><body><div id="app"><!--需求：点击按钮，让h3显示，再点击隐藏--><!--使用transition元素，把需要被动画控制的元素，包裹起来，这是vue官方提供的--><button @click="flag = !flag">显示隐藏</button><transition><h3 v-show="flag">这是一个h3</h3></transition></div></body><script>var vm = new Vue({el:"#app",data:{flag : false},methods:{}})</script>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>过渡类名2</title><script src="../../../thirdlib/vue/vue.js"></script><style>/* v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*//* v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了*/.v-enter,.v-leave-to{opacity: 0;transform: translateX(80px);}/*v-enter-active 【入场动画的时间段】 *//*v-leave-active 【离场动画的时间段】 */.v-enter-active,.v-leave-active{transition: all 0.8s ease;}/*h6的 name="my"， 前缀就是my，可以区分不同组的动画*/.my-enter,.my-leave-to{opacity: 0;transform: translateY(80px);}.my-enter-active,.my-leave-active{transition: all 0.8s ease;}</style></head><body><div id="app"><!--需求：点击按钮，让h3显示，再点击隐藏--><!--使用transition元素，把需要被动画控制的元素，包裹起来，这是vue官方提供的--><button @click="flag = !flag">显示隐藏</button><transition><h3 v-show="flag">这是一个h3</h3></transition><hr /><button @click="flag2 = !flag2">显示隐藏2</button><transition name="my"><h6 v-show="flag2">这是一个h2</h6></transition></div></body><script>var vm = new Vue({el:"#app",data:{flag : false,flag2 : false},methods:{}})</script>
</html>
使用第三方类animate.css实现动画
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>animate</title><script src="../../../thirdlib/vue/vue.js"></script><link rel="stylesheet" href="../../../thirdlib/css/animate.css" /><!--入场 bounceIn 离场bounceOut--><style></style></head><body><div id="app"><!--需求：点击按钮，让h3显示，再点击隐藏--><!--使用transition元素，把需要被动画控制的元素，包裹起来，这是vue官方提供的--><button @click="flag = !flag">显示隐藏</button><!--<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"><h3 v-show="flag">这是一个h3</h3></transition>--><!--:duration设置入场、离场花费的时间（毫秒）--><!--<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="400"><h3 v-show="flag" class="animated">这是一个h3</h3></transition>--><!--:duration传一个对象，可以分别控制入场、离场花费时间--><transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200, leave:400}"><h3 v-show="flag" class="animated">这是一个h3</h3></transition></div></body><script>var vm = new Vue({el:"#app",data:{flag : false},methods:{}})</script>
</html>
使用钩子函数模拟小球半场动画
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>动画钩子函数</title><script src="../../../thirdlib/vue/vue.js"></script><style>.ball{width: 15px;height: 15px;border-radius: 50%;background-color: red;}</style></head><body><div id="app"><input type="button" value="快到碗里来" @click="flag = !flag" /><!--进入半场动画、出去半场动画这里就是将enter改为leave--><transitionv-on:before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@enter-cancelled=""><div v-show="flag" class="ball"></div></transition></div><script>var vm = new Vue({el : "#app",data : {flag : false},methods:{//注意：动画钩子函数的第一个参数el，表示要执行动画的那个元素是个源生的dom对象//相当于document.getElementById('')获取的源生对象beforeEnter(el){//beforeEnter表示动画入场之前，此时动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式//设置小球开始动画之前的起始位置el.style.transform = "translate(0, 0)";},enter(el, done){//这句话没有实际的作用，但是，如果不写，出不来动画效果//可以认为，el.offsetWidth会强制动画刷新（offset相关都可）el.offsetWidth;//表示动画 开始之后的样式，这里可以设置小球完成动画之后的结束状态el.style.transform = "translate(150px, 450px)";el.style.transition = 'all 1s ease';////这里的done其实就是afterEnter这个函数，也就是说done()是afterEnter函数的引用//这是必须的done();},afterEnter(el){//动画完成之后会调用this.flag = !this.flag;}}})</script></body>
</html>
列表动画
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>数据列表实现动画</title><script src="../../../thirdlib/vue/vue.js"></script><style>li{border : 1px dashed #999;margin: 5px;line-height: 35px;padding-left: 5px;font-size: 12px;width: 100%;}.v-enter,.v-leave-to{opacity: 0;transform: translateY(80px);}.v-enter-active,.v-leave-active{transition: all 0.6s ease;}/*下面的.v-move和.v-leave-active配合使用能够实现列表后续元素渐渐飘上来的效果*/.v-move{transition: all 0.6s ease;}.v-leave-active{position:absolute;}li:hover{background-color: hotpink;transition: all 0.8s ease;}</style></head><body><div id="app"><div><label>id:<input type="text" v-model="id" /></label><label>name:<input type="text" v-model="name" /></label><input type="button" value="添加" @click="add" /></div><!--在实现列表过度的时候，如果需要过度的元素是用v-for渲染的，不能用transition包裹，需要使用transition-group--><!--如果要为v-for循环设置动画，比如为每一个元素设置:key属性--><!--<ul>--><!--给transition-group添加appear属性实现页面刚展示出来的入场效果--><!--如果不指定tag，默认渲染为一个span--><transition-group appear tag="ul"><li v-for="(item, i) in list" :key="item.id" @click="del(i)">{{ item.id }} --- {{ item.name }}</li></transition-group><!--</ul>--></div><script>var vm = new Vue({el : "#app",data : {list:[{id :1, name:'张三'},{id:2, name:'李四'},{id:3, name:'王五'}],id : "",name:""},methods:{add(){this.list.push({id:this.id, name:this.name});this.id = this.name = "";},del(i){this.list.splice(i ,1);}}})</script></body>
</html>
VUE—从入门到飞起（三）相关推荐
- VUE—从入门到飞起（五）
目录 路由 路由基本使用 路由规则中定义参数 路由嵌套 命名视图实现经典布局 VUE-从入门到飞起(一) VUE-从入门到飞起(二) VUE-从入门到飞起(三) VUE-从入门到飞起(四) VUE-从 ...
- VUE—从入门到飞起（四）
目录 组件 组件创建方式 组件中的data和methods 组件切换方式 父组件向子组件传值 父组件把方法传递给子组件 案例:评论添加及列表显示 ref获取dom和组件 VUE-从入门到飞起(一) V ...
- VUE—从入门到飞起（二）
目录 过滤器filter vue-resource发送http请求 axios发送http请求 VUE生命周期 VUE生命周期钩子函数 自定义指令 watch computed VUE-从入门到飞起( ...
- VUE—从入门到飞起（一）
目录 基础 起步 插值表达式{{}}.v-cloak.v-text.v-html.v-bind.v-on 学了这么多了,写一个跑马灯效果巩固一下吧 事件修饰符(打开浏览器f12调试哦) v-model ...
- Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
- weblogic从入门到飞起（部署应用、日志）（六）
目录 server日志位置 部署应用程序的过程 自动部署(只能应用于开发模式)(只能发布到管理服务器): 控制台部署: 命令行部署: 还可以用wstl: weblogic从入门到起飞!(weblogi ...
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- vue.jsr入门_JSR 365更新：深入CDI 2.0
vue.jsr入门 上下文和依赖注入2.0( JSR 365 )是CDI 1.2的更新,CDI 1.2目前是Java EE 7平台的一部分. 目前处于公开审查阶段 . 对于不熟悉CDI的那些人,它定义 ...
- vue.jsr入门_JSR-308和Checker框架为jOOQ 3.9添加了更多类型安全性
vue.jsr入门 Java 8引入了JSR-308,它为Java语言添加了新的注释功能. 最重要的是:键入注释. 现在可以像下面这样设计怪物了: 比注解更疯狂的是类型注解. 在数组上. 谁认为这是有 ...
最新文章
- 本地事务和分布式事务工作实践
- .NET : 动态生成工作流定义文件并且进行编译
- mac上使用zsh配置环境变量
- matlab相机畸变校正csdn,android广角相机畸变校正算法和实现示例
- python包括哪些部分_python基础知识部分练习大全
- 数学、物理算法ActionScript实现(2)
- 抱歉（HDU-1418）
- 的优缺点_折叠门的优缺点
- 达摩院 2020 预测：模块化降低芯片设计门槛 | 问底中国 IT 技术演进
- 【Augmented Reality】增强现实中的光学透射式头盔显示器的标定深入
- 进程、轻量级进程（LWP）、线程
- linux 系统信号忽略和system函数返回值问题(system的实现)
- 如何将本地文件夹映射为硬盘盘符？
- IDEA+Java控制台实现商品管理系统
- 认知盈余时代-知乎如何运营
- 在Excel里怎么输入可以打钩的选择框？
- 【2019】【论文笔记】基于混合石墨烯金属结构的可重构THz Vivaldi天线——
- Android开发项目管理7宗罪之五——项目组个性文档文件的管理
- 利用clamav为程序添加查毒功能
- 「万达董事会大换血」背后 | 一点财经
热门文章
- spring boot + zookeeper 注册中心
- springboot打包发布
- mybatis高级查询
- book mac pro怎么重装系统_Macbook Pro怎么重装系统
- linux分区dh满了,python 在linux下能过top,和dh命令获得cpu,内存，以及硬盘信息 - Sprite...
- 服务器硬件及RAID配置
- Oracle拆分字符串及排序,Oracle 字符串查询以及拆分函数
- systemd常见使用总结
- 汉字转拼音php代码函数,php中将汉字转换成拼音的函数代码
- c语言解析json报文源码,GitHub - faycheng/cJSON: cJson源码和源码分析