一、vue动画实现原理:
  动画的实现,必须通过元素的显示隐藏或销毁创建。v-show  v-if
  vue中如果需要使用动画的时候,需要使用一个内置组件transition组件 该组件有一个name属性 值为动画的类名(类名随意起)
  
  实现动画有很多方式,例如:
    可以配合使用第三方 CSS 动画库,如 Animate.css

     在过渡钩子函数中使用 JavaScript 直接操作 DOM

     可以配合使用第三方 JavaScript 动画库,如 Velocity.js

  我们今天不说利用第三方动画库,自己手动利用css3 实现简单动画功能

二、动画的类名

  动画的类名分为6个

  入场动画

    <name>-enter          入场前

    <name>-enter-active    入场持续的过程

    <name>-enter-to    入场后

  出场动画

    <name>-leave      出场前
    <name>-leave-active   出场持续的过程
    <name>-leave-to      出场后
三、demo
  html和技术部分代码:通过点击按钮让盒子进行显示隐藏(v-if和v-show都可以)

通过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的属性值,从而达到一种动画的效果。

  3、transform:
                    向元素应用2D或3D转换。对元素进行旋转、缩放、移动或倾斜
    1、translate ()根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。类似于定位中的left值(X轴)、top值(Y轴) 
            使用translate()函数,你可以把元素从原来的位置移动,而不影响在X、Y轴上任何组件。
            translate (0,500px)
    2、rotate() 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。rotate(360deg )
    3、 scale()该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
            缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值,使一个元素缩小;而任何大于或等于1.01的值,让元素显得更大。
  常用的transform的属性就是这些。
 
 

vue实现动画和css3动画属性的更多相关文章

  1. 使用jquery封装的动画脚本(无动画、css3动画、js动画)

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  2. 关于JS动画和CSS3动画的性能差异

    本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...

  3. JS动画与CSS3动画

    Js动画 show / hide var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒钟内逐渐显示 div.hide(3000); // ...

  4. js动画和css3动画的区别

    JS动画(逐帧动画) 首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以他的可操作性很高,几乎可以完成任何你想要的动画形式.但是由于逐帧动画的帧序列内容不一样,会增加制作 ...

  5. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  6. CSS3 动画一瞥

    伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来,而在这之前,一提到动画我们可能会想到JavaScript,Flash,Java插件等.如果是用JavaScript那倒 ...

  7. CSS3动画(性能篇)

    写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...

  8. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  9. css3动画animate

    CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...

随机推荐

  1. 洛谷 P3049 Landscaping ( 贪心 || DP)

    题意 : 有n块土地,每块有A[i]泥土,现把其改造成B[i]泥土,有3种操作:(1)花费X向任意土地增加1泥土:(2)花费Y向任意土地减少1泥土:(3)花费Z*|i-j|把土地i的1泥土运到土地j. ...

  2. python build-in function

    目录(?)[-] absx alliterable anyiterable basestring binx boolx callableobject chri classmethodfunction ...

  3. Spring Boot教程(十六)属性配置文件详解(1)

    相信很多人选择Spring Boot主要是考虑到它既能兼顾Spring的强大功能,还能实现快速开发的便捷.我们在Spring Boot使用过程中,最直观的感受就是没有了原来自己整合Spring应用时繁 ...

  4. selenium+常见操作

    1.多窗口操作 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作,就得先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 句 ...

  5. Win7,win10(部分机型) 安装appscan9.0.3.10(可升级)实操流程

    Win10部分机型不能很好的兼容appscan,建议使用者用win7系统安装appscan 写于:2018.12.2 IBM Security AppScan Standard 可通过自动执行应用安全 ...

  6. 20165220课程设计个人报告——Part4-Cortex M4模块

    个人报告: 20165220 葛宇豪 1.个人贡献 a.实验环境搭建 b.代码分析与理解 2.设计中遇到的问题以及解决方案 问题1:mdk5每次编译之前都会直接闪退 刚开始以为是环境问题,后来上网查资 ...

  7. ActiveMQ从入门到精通(一)

    这是关于消息中间件ActiveMQ的一个系列专题文章,将涵盖JMS.ActiveMQ的初步入门及API详细使用.两种经典的消息模式(PTP and Pub/Sub).与Spring整合.ActiveM ...

  8. RAC+单实例场景下 DG主备切换,报ORA-01577

    SQL> ALTER DATABASE COMMIT TO SWITCHOVER TO PRIMARY;ALTER DATABASE COMMIT TO SWITCHOVER TO PRIMAR ...

  9. hook工具

    调试工具 WinDbg com/daoyuly/p/3570037 DebugDiag procexp64.exe APIMonitor OllyDBG API伴侣 FileMon  v7.04  ( ...

  10. A 内存挂 B 封包挂 C 钩子挂 D CALL挂 外挂

    https://www.zhihu.com/question/32291769 作者:猎狐链接:https://www.zhihu.com/question/32291769/answer/70929 ...