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 Event学习补遗 addEventSimple
Feb 11 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 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
文章推荐系统(三)
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
浅谈php提交form表单
2015/07/01 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP运行模式汇总
2016/11/06 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
Vue响应式原理详解
2017/04/18 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python基础 range的用法解析
2019/08/23 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python识别处理照片中的条形码
2020/11/16 Python
计算机专业个人求职自荐信
2013/09/21 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
法制宣传标语
2014/06/23 职场文书
优秀党员先进材料
2014/12/18 职场文书
客户答谢会致辞
2015/07/30 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python