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_ibm
May 16 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
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
用Flash图形化数据(二)
2006/10/09 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
Python文件和流(实例讲解)
2017/09/12 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
餐厅执行经理岗位职责范本
2014/02/26 职场文书
《画》教学反思
2014/04/14 职场文书
学习退步检讨书
2014/09/28 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
通知的格式范文
2015/04/27 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
python中的装饰器该如何使用
2021/06/18 Python
Python编写冷笑话生成器
2022/04/20 Python