终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation
以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的。最近做活动页面,要求页面比较酷炫,终于有机会认真了解了。
transition:英文过渡的意思,作用是过渡效果;animation:英文活泼、生气、激励,动画片就是animation film,作用是动画效果。
transition在w3school的实例:
1 //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px:
2 div
3 {
4 width:100px;
5 transition: width 2s;
6 -webkit-transition: width 2s; /* Safari */
7 }
8 div:hover {width:300px;}
9
10 //transition 属性是一个简写属性,用于设置四个过渡属性:
11
12 //指定CSS属性的name,transition效果
13 transition-property
14 //transition效果需要指定多少秒或毫秒才能完成
15 transition-duration
16 //指定transition效果的转速曲线
17 transition-timing-function
18 //定义transition效果开始的时候
19 transition-delay
animation在w3school的实例:
1 //使用简写属性,将动画与 div 元素绑定
2 div
3 {
4 animation:mymove 5s infinite;
5 -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
6 }
7 //animation 属性是一个简写属性,用于设置六个动画属性:
8 //规定需要绑定到选择器的 keyframe 名称。。
9 animation-name
10 //规定完成动画所花费的时间,以秒或毫秒计。
11 animation-duration
12 //规定动画的速度曲线。
13 animation-timing-function
14 //规定在动画开始之前的延迟。
15 animation-delay
16 //规定动画应该播放的次数。
17 animation-iteration-count
18 //规定是否应该轮流反向播放动画。
19 animation-direction
animation使用@keyframes规定动画
1 @keyframes animationname {
2 keyframes-selector {
3 css-styles;
4 }
5 }
6 //必需。定义动画的名称。
7 animationname
8 //必需。动画时长的百分比。
9 //合法的值:
10 //0-100%
11 //from(与 0% 相同)
12 //to(与 100% 相同)
13 keyframes-selector
14 //必需。一个或多个合法的 CSS 样式属性。
15 css-styles
以上是transition和animation的基础知识,最项目使用vue这样主流框架,就用vue使用下transition和animation
- 第一步就是要安装依赖,只安装animation动画库,transiton是直接可以使用的标签,不用去下载依赖
npm install animate.css –save
- 全局引用一下animation动画库
1 import animate from 'animate.css'
2 Vue.use(animate); - 简单使用一下animation动画库,只要在class加上规定的动画效果名称就可以
1 <div class="rotateIn"
2 style="animation-duration:2s;
3 animation-delay:1s;
4 animation-iteration-count:1;
5 animation-fill-mode:both;">
6 </div>
7 <div class="fadeInLeft"
8 style="opacity:0;
9 animation-duration:3s;
10 animation-delay:2s;
11 animation-iteration-count:1;
12 animation-fill-mode:both;">
13 </div>
14 <div class="fadeInUp"
15 style="opacity:0;
16 animation-duration:3s;
17 animation-delay:3s;
18 animation-iteration-count:1;
19 animation-fill-mode:both;">
20 </div> - 正式使用transiton和animation,把知识进阶一下,使用transition标签
1、使用基础的transiton和animation动画
1 /*v是默认的,在transition中定义name属性
2 <transition name=fade>
3 v-enter-from就要改成fade-enter-from
4 */
5 <transition>
6 <div>hello world</div>
7 </transition>
8 //使用transition标签时,直接在css中控制
9 /*元素进入前效果*/
10 .v-enter-from{
11 opacity: 0;
12 }
13 /*元素进入时效果*/
14 .v-enter-active{
15 /*使用定义的动画*/
16 animation: shake 0.3s;
17 }
18 /*元素进入后效果*/
19 .v-enter-to{
20 opacity: 1;
21 }
22 /*元素离开前效果*/
23 .v-leave-from{
24 opacity: 1;
25 }
26 /*元素离开时效果*/
27 .v-leave-active{
28 /*使用定义的动画*/
29 animation: shake 0.3s;
30 }
31 /*元素离开后效果*/
32 .v-leave-to{
33 opacity: 0;
34 }
35 /*定义一个动画效果*/
36 @keyframes shake {
37 0%{
38 transform: translateX(-100px);
39 }
40 50%{
41 transform: translateX(-50px);
42 }
43 0%{
44 transform: translateX(50px);
45 }
46 }2、使用trnasition标签的属性,结合animation的动画库
1 <transition
2 transition :duration="{enter:1500,leave:600}"
3 enter-from-class="animated"
4 enter-active-class="animated"
5 enter-to-class="animated"
6 leave-from-class="animated fadeOut"
7 leave-active-class="animated fadeOut"
8 leave-to-class="animated fadeOut"
9 v-on:before-enter="beforeEnter"
10 v-on:enter="enter"
11 v-on:after-enter="afterEnter"
12 v-on:enter-cancelled="enterCancelled"
13 v-on:before-leave="beforeLeave"
14 v-on:leave="leave"
15 v-on:after-leave="afterLeave"
16 v-on:leave-cancelled="leaveCancelled"
17 mode="out-in" appear
18 >
19 /*enter-from-class就是v-enter-from元素进入前
20 animated就是使用animation动画库,fadeOut就是动画效果
21 */
22 /*before-enter这些就是钩子函数,是滑动进入状态
23 mode="out-in"是设定动画是先入后出,还是先出后入
24 appear 是设置加载时就要开始动画
25 */
26 // 进入中
27 //动画进入前
28 // --------
29 beforeEnter: function (el) {
30 //el就是dom元素
31 // ...
32 },
33 // 此回调函数是可选项的设置
34 // 与 CSS 结合时使用
35 //动画进入时
36 enter: function (el, done) {
37 // ...
38 done()
39 },
40 //动画进入后
41 afterEnter: function (el) {
42 // ...
43 },
44 //动画进入完成
45 enterCancelled: function (el) {
46 // ...
47 },
48 // --------
49 // 离开时
50 // --------
51 beforeLeave: function (el) {
52 // ...
53 },
54 // 此回调函数是可选项的设置
55 // 与 CSS 结合时使用
56 leave: function (el, done) {
57 // ...
58 done()
59 },
60 afterLeave: function (el) {
61 // ...
62 },
63 // leaveCancelled 只用于 v-show 中
64 leaveCancelled: function (el) {
65 // ...
66 }下面是animation常用的动画效果
1 fade: {
2 title: '淡入淡出',
3 fadeIn: '淡入',
4 fadeInDown: '向下淡入',
5 fadeInDownBig: '向下快速淡入',
6 fadeInLeft: '向右淡入',
7 fadeInLeftBig: '向右快速淡入',
8 fadeInRight: '向左淡入',
9 fadeInRightBig: '向左快速淡入',
10 fadeInUp: '向上淡入',
11 fadeInUpBig: '向上快速淡入',
12 fadeOut: '淡出',
13 fadeOutDown: '向下淡出',
14 fadeOutDownBig: '向下快速淡出',
15 fadeOutLeft: '向左淡出',
16 fadeOutLeftBig: '向左快速淡出',
17 adeOutRight: '向右淡出',
18 fadeOutRightBig: '向右快速淡出',
19 fadeOutUp: '向上淡出',
20 fadeOutUpBig: '向上快速淡出'
21 },
22 bounce: {
23 title: '弹跳类',
24 bounceIn: '弹跳进入',
25 bounceInDown: '向下弹跳进入',
26 bounceInLeft: '向右弹跳进入',
27 bounceInRight: '向左弹跳进入',
28 bounceInUp: '向上弹跳进入',
29 bounceOut: '弹跳退出',
30 bounceOutDown: '向下弹跳退出',
31 bounceOutLeft: '向左弹跳退出',
32 bounceOutRight: '向右弹跳退出',
33 bounceOutUp: '向上弹跳退出'
34 },
35 zoom: {
36 title: '缩放类',
37 zoomIn: '放大进入',
38 zoomInDown: '向下放大进入',
39 zoomInLeft: '向右放大进入',
40 zoomInRight: '向左放大进入',
41 zoomInUp: '向上放大进入',
42 zoomOut: '缩小退出',
43 zoomOutDown: '向下缩小退出',
44 zoomOutLeft: '向左缩小退出',
45 zoomOutRight: '向右缩小退出',
46 zoomOutUp: '向上缩小退出'
47 },
48 rotate: {
49 title: '旋转类',
50 rotateIn: '顺时针旋转进入',
51 rotateInDownLeft: '从左往下旋入',
52 rotateInDownRight: '从右往下旋入',
53 rotateInUpLeft: '从左往上旋入',
54 rotateInUpRight: '从右往上旋入',
55 rotateOut: '顺时针旋转退出',
56 rotateOutDownLeft: '向左下旋出',
57 rotateOutDownRight: '向右下旋出',
58 rotateOutUpLeft: '向左上旋出',
59 rotateOutUpRight: '向右上旋出'
60 },
61 flip: {
62 title: '翻转类',
63 flipInX: '水平翻转进入',
64 flipInY: '垂直翻转进入',
65 flipOutX: '水平翻转退出',
66 flipOutY: '垂直翻转退出'
67 },
68 strong: {
69 title: '强调类',
70 bounce: '弹跳',
71 flash: '闪烁',
72 pulse: '脉冲',
73 rubberBand: '橡皮筋',
74 shake: '左右弱晃动',
75 swing: '上下摆动',
76 tada: '缩放摆动',
77 wobble: '左右强晃动',
78 jello: '拉伸抖动'
79 }
结尾,学习用些transition和animation肯定能增加用户体验感,做出一些高大上的网页。
终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation的更多相关文章
- vue中使用transition标签底部导航闪烁问题
<transition :name="transitionName" :duration="{ enter: 500, leave: 0 }" > ...
- vue中使用transition和animate.css动画效果
一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...
- [转帖]十分钟快速理解DPI和PPI,不再傻傻分不清!
十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...
- JS魔法堂:属性、特性,傻傻分不清楚
一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...
- 学点经济学:M0、M1、M2、M3,傻傻分不清?(转载)
来源:http://t.10jqka.com.cn/pid_97006727.shtml 学点经济学:M0.M1.M2.M3,傻傻分不清? 25,508人浏览 2018-08-03 11:06 常听人 ...
- 【华为敏捷/DevOps实践】7. 敏捷,DevOps,傻傻不分清楚【华为云技术分享】
文:姚冬(华为云DevCloud首席技术布道师,资深DevOps与精益/敏捷专家,金融解决方案技术Leader,中国DevOpsDays社区核心组织者) 前言 敏捷是什么?DevOps是什么?两者有什 ...
- 傻傻分不清之 Cookie、Session、Token、JWT
傻傻分不清之 Cookie.Session.Token.JWT 什么是认证(Authentication) 通俗地讲就是验证当前用户的身份,证明“你是你自己”(比如:你每天上下班打卡,都需要通过指纹打 ...
- URI与URL傻傻分不清楚?
前言 总所周知,缓存是解决Http1.1协议传输性能的问题中最主要的手段. 缓存既可以存在于浏览器上,也可以存在于服务器中. 而影响缓存的Http头部有很多,其中Cache-Control是比较重要的 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
随机推荐
- 一篇文章了解_selenium
(一)安装selenium 2018年10月7日 星期日 11:14 安装python 打开 Python官网,找到"Download", 在其下拉菜单中选择自己的平台(Windo ...
- linux打包 压缩 解压tar常归操作
tar 打包 tar -cvf 打包后路径和文件名.tar 需要打包的路径和文件压缩 tar -zcvf 打包后路径和文件名.tar.gz 需要打包的路径和文件解压 tar -xvf 包名 -C 路径 ...
- Nginx下关于缓存控制字段cache-control的配置说明
HTTP协议的Cache -Control指定请求和响应遵循的缓存机制.在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程.请求时的缓存指令包括: no ...
- 建议收藏!2020阿里面试题(JVM+Spring Cloud+微服务)上
前言 对于大厂面试,我想要强调的一点就是心态真的很重要,是决定你在面试过程中发挥的关键,若不能正常发挥,很可能就因为一个小失误与offer失之交臂,所以一定要重视起来.另外提醒一点,充分复习,是消除你 ...
- 【PUPPETEER】初探之执行JavaScript方法(六)
一.知识点 page.evaluate() document.querySelector().value = ''; 二.解析知识点 page.evaluate(),查看puppeteer 的api ...
- SFTP 服务器cd() 方法和 ls() 方法说明
方法说明: cd():这个方法用于进入某个目录下. 默认情况,当连接SFTP服务器成功后直接进入用户目录,比如我连接自己本机SFTP服务器后进入/Users/mac目录.cd() 方法进入每一个目录都 ...
- C#设计模式-装饰器模式(Decorator Pattern)
引言 当我们完成一个软件产品开发后就需要对其进行各种测试,适配快速迭代下质量的保障.当有一个完善的产品的对象后,如果我们想要给他添加一个测试功能,那么我们可以用一个新的类去装饰它来实现对原有对象职责的 ...
- day008|python之函数
函数 目录 函数 1 Type hinting 2 函数参数 2.1 概述 2.2 参数详解 2.3 参数的使用 2.4 可变长函数-->*与**的应用 2.6 命名关键字形参 3 函数对象 3 ...
- iOS 百度地图使用详解
最近仿照美团做了款应用,刚好用到百度地图,高德地图之前用的比较多,只是这个项目的后台服务器是另外一个公司做的,他们用的就是百度地图,现在网上用百度地图的还不算太多,博文也是断断续续的,主要是中间跳跃有 ...
- MindSpore手写数字识别初体验,深度学习也没那么神秘嘛
摘要:想了解深度学习却又无从下手,不如从手写数字识别模型训练开始吧! 深度学习作为机器学习分支之一,应用日益广泛.语音识别.自动机器翻译.即时视觉翻译.刷脸支付.人脸考勤--不知不觉,深度学习已经渗入 ...