TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

H5&C3之过渡效果和2D变换

zyz
2019-04-27
/
0 评论
/
847 阅读
/
正在检测是否收录...
04/27

一、transition过渡

  • transition-property: 要运动的样式(all || [attr] || none)
  • transition-duration: 运动时间
  • transition-delay:延迟时间
  • transition-timing-function: 运动形式

    - ease: 逐渐变慢(默认值)
    - linear: 匀速
    - ease-in: 加速
    - ease-out: 减速
    - ease-in-out: 先加速后减速
    - cubic-bezier: 贝塞尔曲线(x1, y1, x2, y2 )
    
    transition: all 2s;  // 所有属性,过渡时间2s
    transition: width 2s, height 3s;
    > 贝塞尔曲线在线编辑: http://cubic-bezier.com/
    

二、过渡事件

  • Webkit

      // 添加事件
      obj.addEventListener('webkitTransitionEnd',function(){},false);
      // 删除事件
      obj.removeEventListener('webkitTransitionEnd', fn,false);
  • firefox

      // 添加事件
      obj.addEventListener('transitionend',function(){},false);
      // 删除事件
      obj.removeEventListener('transitionend', fn,false);
    > 
    > // 添加事件
    > function addEvent(obj, fn){
    >  obj.addEventListener('webkitTransitionEnd', fn,false);
    >  obj.addEventListener('transitionend', fn,false);
    > }    
    
    > // 删除事件
    > function removeEvent(obj, fn){
    >  obj.removeEventListener('webkitTransitionEnd', fn,false);
    >  obj.removeEventListener('transitionend', fn,false);
    > }
    

三、transform形变(2d)

  • rotate() 旋转函数 取值度数

    - deg 度数
    - transform-origin 旋转的基点
    
    // 以矩形右上角为基点旋转
    transform-origin: right top;
    // 以矩形左上角为基点旋转
    transform-origin: 0 0;
    // 旋转30度
    transform: rotate(30deg);
  • skew() 倾斜函数 取值度数

    - skewX()
    - skewY()
    
    // x轴和y轴方向,斜切30度
    transform: skewX(30deg) skewY(30deg);
    ![skewX](http://upload-images.jianshu.io/upload_images/1801379-c7ea30969246f707.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    ![skewY](http://upload-images.jianshu.io/upload_images/1801379-6ff57497f557c2bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
  • scale() 缩放函数 取值 正数、负数和小数

    - scaleX()
    - scaleY()
    
    // 矩形缩小为0.9
    transform: scale(0.9);
  • translate() 位移函数

    - translateX()
    - translateY()
    
    // 往右平移30px
    transform: translateX(30px)
    > 案例: 钟表
赞(0)
评论 (0)
本篇文章评论功能已关闭