js写css3过渡前端,web前端vue之CSS过渡效果示例
过渡效果在交互体验中的重要性不言而喻。以往我们使用js或Jquery添加或移除元素的类(class),搭配CSS中定义好的样式,再引用一些javascript库之后,可以做作出非常复杂,惊艳的动态效果,不过这套方法还是太繁琐。
vue.js内置了一套过渡系统,可以在元素从DOM中插入或移除时自动应用过渡效果。vue会在是党的时机触发css过渡或者动画,你也可以提供相应的javascript钩子函数在过渡过程中执行自定义的DOM操作。
每个过渡效果,都需要在目标元素上使用transition特性。
transition的特性可以与以下指令一起搭配使用:
1.v-if 2.v-show 3.v-for 4.动态组件
还有其它的一些指令或资源,大家可以自行查找。
完整代码实例如下:
这样的嵌套也可以
.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的一个过渡效果,比如页面从窗口左侧划入进场,这样是不是很酷啊?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
js写css3过渡前端,web前端vue之CSS过渡效果示例相关推荐
- css 所有字体大小,前端Web开发人员的CSS相对字体大小
在本文中,我们将看几种不同的方式,前端Web开发人员可以使用CSS操作其网页的字体. 网页设计中最大的混乱之一是由font-size属性造成的. 在CSS中,可以使用多个单元,这只会导致设计人员额外头 ...
- html怎么设置过渡字体,web前端入门到实战:css3基础-文本与字体+转换+过渡+动画+案例...
Css3文本与字体 文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: norm ...
- js考试题 html5新特性,Web前端初级面试题总结
Web前端初级面试题总结 发布时间:2018-11-02 11:17, 浏览次数:549 , 标签: Web Web篇: 1.常见的浏览器内核有哪些? IE:Trident内核 ...
- 什么叫Web前端?web前端HTML5学习方法分享
web前端开发主要是通过html,css,js,ajax,DOM等前端技术,实现网站在客服端的正确显示及交互功能.在众多的前端开发技术中,JavaScript击败了Applet.ActionScrip ...
- php包括web前端,web前端包括什么技术?
再知道什么是web前端说这个之前,我们先了解web前端工程师是干什么的?本文将和大家讲述web前端包括什么技术,以及什么是web前端. Web前端开发工程师,主要职责是利用(X)HTML/CSS/Ja ...
- web前端开源框架_9个用于前端Web开发的开源CSS框架
web前端开源框架 当大多数人想到Web开发时,通常会想到HTML或JavaScript. 他们通常会忘记对访问网站的能力有更大影响的技术: 级联样式表(CSS) . 根据Wikipedia的说法,C ...
- 计算机二级web前端,web前端:原生js之Math对象
微软推出的Math工具提供了强大的数学工具,尤其适合学生和教师,可以帮助他们逐步解方程,更好的理解代数学.几何学.物理.化学和微积分等.Math的界面左侧被设计成一个计算机模型,右侧则是主要的显示区域 ...
- 基于HTML+CSS+JS制作蛋糕商城(web前端网页制作课作业)
- html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影 男女 第一句:act ...
最新文章
- mysql drivermanager_MYSQL 之 JDBC(二): 数据库连接(二)通过DriverManager获取数据库连接...
- java 收集系统资源_方法:Linux 下用JAVA获取CPU、内存、磁盘的系统资源信息
- java中能构成循环的语句_《编程导论(Java)#183;3.2.4 循环语句》
- Adobe网页无法访问服务器,Adobe Acrobat时提示“无法访问网络位置\startup”
- Dell 电话技术支持工程师答用户问(暴笑)
- 2019 蓝桥杯省赛 A 组模拟赛(一)阶乘位数
- eclipse打断点调试进入到class文件中,不显示变量值的解决办法汇总
- C/C++中struct/union/class内存对齐
- OpenStack组件——Nova计算资源管理
- 从angularJS看MVVM
- Office 解决WORD转PDF未显示书签。
- 【Windows】安装win10虚拟机
- 注意啦!使用“流量卡”别图便宜,小心被监控!
- 自己动手编译最新Android源码及SDK
- 新概念英语第三册51-60课(转)
- Java开发常用在线工具
- MySQL基础必会,简单易懂
- 啥地方规定豆腐干豆腐
- python点阵显示数字_程序点滴001_Python模拟点阵数字
- 向程序发送命令时出现错误