web前端vue之CSS过渡效果示例


Posted in Javascript onJanuary 10, 2018

过渡效果在交互体验中的重要性不言而喻。以往我们使用js或Jquery添加或移除元素的类(class),搭配CSS中定义好的样式,再引用一些javascript库之后,可以做作出非常复杂,惊艳的动态效果,不过这套方法还是太繁琐。

vue.js内置了一套过渡系统,可以在元素从DOM中插入或移除时自动应用过渡效果。vue会在是党的时机触发css过渡或者动画,你也可以提供相应的javascript钩子函数在过渡过程中执行自定义的DOM操作。

每个过渡效果,都需要在目标元素上使用transition特性。

<div v-if="show" transition="my-style">显示</div>

transition的特性可以与以下指令一起搭配使用:

1.v-if    2.v-show   3.v-for   4.动态组件 

还有其它的一些指令或资源,大家可以自行查找。

完整代码实例如下:

<div v-if="show" :transition="expand"></div>  // expand必需事先定义好,expand后面写样式要用(关键)
<transition name="expand"><div v-if="show">显示</div></transition>这样的嵌套也可以

.expand-transition { // 必需写
 transition: all .3s ease; 
 height: 30px; 
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

.expand-enter{ //开始进入过渡,元素被插入生效
 transition:opacity .5s;
} 
.fade-leave-active { // 结束状态
 opacity:0;
}

当然有开始肯定是有结束的状态,它其实是有四个(CSS类)名在enter/leave的状态中切换。

1.v-enter:定义进入过渡的开始状态,在元素被插入的时生效,在下一个帧移除

2.v-enter-active:定义进入过渡的结束状态,在元素被插入的时候生效,在transition/animation完成之后移除

3.v-leave:定义离开过渡的开始状态,在离开过渡被触发时生效,在下一帧移除

4.v-leave-active:定义离开过渡的开始状态,在离开过渡被触发时生效,在下一个帧移除

根据以上四个状态,就可以完整的写好一个css的一个过渡效果,比如页面从窗口左侧划入进场,这样是不是很酷啊?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 #Javascript
利用ECharts.js画K线图的方法示例
Jan 10 #Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 #Javascript
微信小程序实现传参数的几种方法示例
Jan 10 #Javascript
React中常见的动画实现的几种方式
Jan 10 #Javascript
使用async-validator编写Form组件的方法
Jan 10 #Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 #Javascript
You might like
解析php中static,const与define的使用区别
2013/06/18 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python爬虫与反爬虫大战
2020/07/30 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
什么时候需要进行强制类型转换
2016/09/03 面试题
党员岗位承诺口号大全
2014/03/28 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
2014年终个人总结报告
2015/03/09 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
担保书范文
2019/07/09 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
JavaScript异步操作中串行和并行
2021/11/20 Javascript