zoukankan      html  css  js  c++  java
  • css3 transform动画效果与公司框架简易动画的差异

    先看一下该网站的效果

    http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/

    该站里面的动画效果由简易动画与css3动画2种方式混合达到的。

    一、特点与差异、

    1.简易动画直接通过对dom元素追加class类名与属性参数

    像这样

    <img src="images/page02/text01.png"  class="text01 cmn-animate" cfg="{action:[{styles:{'opacity':'0'},speed:200},{styles:{'opacity':'1'},speed:1600}],loop:0,index:1}" />

    实现原理:是对jQuery的animate动画的改写,以达到控制元素的css样式实现动画效果。

    2.css3动画(这个参考一下代码)

    实现原理:主要是通过css关键帧在不同时间段对样式属性的变化控制实现动画效果。

    3.transform做 css3动画效果,页面切版做好以后直接加上去即可(因为已经设置定位了),不用改变以前的位置属性已经最终的位置属性。

    以首页的车子从页面外面飞到页面里面为例:

    如果适用简易动画,要首先把车子的left属性设置为left:-200px;然后再通过在一定的时间内把left设置为0,让其进入页面内。我们在切版的时候就是设置了left:0;

    现在为了添加动画效果,需要在样式表里面把车子初始值left设置为-2000px,最后再设置后来为0,已达到简单的飞入动画效果。

    如果是通过css3的transform 做出的动画效果,从我们切版的角度是不会影响到原来元素位置的最终属性值(position:absolute;left:xxpx;top:xxpx;)。

    简易动画的位置变化效果是时刻在改变元素的位置属性值

    简易动画的动画效果添加相对略微麻烦一点。因为起始位置属性要改变,最终位置属性值才是页面切版后的位置属性值。

    4.适用性:简易动画适用与PC端移动端都可以。css3动画则不兼容IE7,8。

  • 相关阅读:
    Vue3小知识
    Eslint小知识
    微信小程序注意点
    vue常用方法2
    vue常用方法
    vue组件常用方法
    013 --TypeScript之高级类型
    012--TypeScript之类型推断
    jenkins window unity 控制台输出中文乱码
    Unity 生成 Android App Bundle(aab) (二)
  • 原文地址:https://www.cnblogs.com/ruoqiang/p/4142167.html
Copyright © 2011-2022 走看看