vue实现动画和css3动画属性

在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库,如 Velocity.js
我们今天不说利用第三方动画库,自己手动利用css3 实现简单动画功能
二、动画的类名
动画的类名分为6个
入场动画
<name>-enter 入场前
<name>-enter-active 入场持续的过程
<name>-enter-to 入场后
出场动画

通过css代码,实现具体的动画效果,本案例实现的是对盒子进行放大的动画。
用animation做动画时,把效果给<name>-enter-active <name>-leave-active
或name>-enter-to<name>-leave-to都可以
四、css3
CSS3属性中有关于制作动画的三个属性: Transition(过渡),Transform(转换),Animation(动画)
1、transtion:
transition-property 需要过渡的样式 (all || [attr] || none)默认是 all
transition-duration 运动时间 默认是 0 s
transition-delay 延迟时间 默认是 0
transition: (过渡样式、运动时间、延迟时间)
transition-timing-function 运动形式 默认是 ease
ease:(慢速开始,然后变快,然后慢速结束) linear:(匀速) ease-in:(加速)
ease-out:(减速)
ease-in-out:(先加速后减速)
cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 )
steps 实现一个关键逐帧动画画的功能
2、animation: 定义动画之前先定义关键帧keyframes
animation和transition的区别?
相同点:都是随着时间改变元素的属性值。
不同点:
transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;
而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。
vue实现动画和css3动画属性的更多相关文章
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
- JS动画与CSS3动画
Js动画 show / hide var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒钟内逐渐显示 div.hide(3000); // ...
- js动画和css3动画的区别
JS动画(逐帧动画) 首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以他的可操作性很高,几乎可以完成任何你想要的动画形式.但是由于逐帧动画的帧序列内容不一样,会增加制作 ...
- 高性能 CSS3 动画
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...
- CSS3 动画一瞥
伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来,而在这之前,一提到动画我们可能会想到JavaScript,Flash,Java插件等.如果是用JavaScript那倒 ...
- CSS3动画(性能篇)
写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3动画animate
CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...
随机推荐
- 洛谷 P3049 Landscaping ( 贪心 || DP)
题意 : 有n块土地,每块有A[i]泥土,现把其改造成B[i]泥土,有3种操作:(1)花费X向任意土地增加1泥土:(2)花费Y向任意土地减少1泥土:(3)花费Z*|i-j|把土地i的1泥土运到土地j. ...
- python build-in function
目录(?)[-] absx alliterable anyiterable basestring binx boolx callableobject chri classmethodfunction ...
- Spring Boot教程(十六)属性配置文件详解(1)
相信很多人选择Spring Boot主要是考虑到它既能兼顾Spring的强大功能,还能实现快速开发的便捷.我们在Spring Boot使用过程中,最直观的感受就是没有了原来自己整合Spring应用时繁 ...
- selenium+常见操作
1.多窗口操作 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作,就得先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 句 ...
- Win7,win10(部分机型) 安装appscan9.0.3.10(可升级)实操流程
Win10部分机型不能很好的兼容appscan,建议使用者用win7系统安装appscan 写于:2018.12.2 IBM Security AppScan Standard 可通过自动执行应用安全 ...
- 20165220课程设计个人报告——Part4-Cortex M4模块
个人报告: 20165220 葛宇豪 1.个人贡献 a.实验环境搭建 b.代码分析与理解 2.设计中遇到的问题以及解决方案 问题1:mdk5每次编译之前都会直接闪退 刚开始以为是环境问题,后来上网查资 ...
- ActiveMQ从入门到精通(一)
这是关于消息中间件ActiveMQ的一个系列专题文章,将涵盖JMS.ActiveMQ的初步入门及API详细使用.两种经典的消息模式(PTP and Pub/Sub).与Spring整合.ActiveM ...
- RAC+单实例场景下 DG主备切换,报ORA-01577
SQL> ALTER DATABASE COMMIT TO SWITCHOVER TO PRIMARY;ALTER DATABASE COMMIT TO SWITCHOVER TO PRIMAR ...
- hook工具
调试工具 WinDbg com/daoyuly/p/3570037 DebugDiag procexp64.exe APIMonitor OllyDBG API伴侣 FileMon v7.04 ( ...
- A 内存挂 B 封包挂 C 钩子挂 D CALL挂 外挂
https://www.zhihu.com/question/32291769 作者:猎狐链接:https://www.zhihu.com/question/32291769/answer/70929 ...