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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
js 判断 enter 事件
Feb 12 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
vue 中固定导航栏的实例代码
Nov 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
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
html读出文本文件内容
2007/01/22 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
JS中表单的使用小结
2014/01/11 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
详解Python字典的操作
2019/03/04 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
班主任个人工作反思
2014/04/28 职场文书
主持人演讲稿
2014/05/13 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers