阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery Transit

      插件 jQuery.transit 中文 API 文档,jQuery 的超级流畅的 CSS3 转换和转换

      源码 & 下载

      jQuery Transit 是一个帮助你在 jQuery 中进行 CSS 转换和转换的插件。

      有关示例,请参阅 jQuery Transit 网站。

      用法

      只需在 jQuery 之后包含 jquery.transit.js。需要 jQuery 1.4+。

      <script src='jquery.js'></script>
      <script src='jquery.transit.js'></script>
      

      它也可以通过凉亭和 npm 获得。

      $ bower install --save jquery.transit
      $ npm install --save jquery.transit
      

      转换

      您可以像设置 jQuery 中的任何 CSS 属性一样设置转换。(注意你不能 $.fn.animate(),只能设置它们。)

      $("#box").css({ x: '30px' });               // Move right
      $("#box").css({ y: '60px' });               // Move down
      $("#box").css({ translate: [60,30] });      // Move right and down
      $("#box").css({ rotate: '30deg' });         // Rotate clockwise
      $("#box").css({ scale: 2 });                // Scale up 2x (200%)
      $("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
      $("#box").css({ skewX: '30deg' });          // Skew horizontally
      $("#box").css({ skewY: '30deg' });          // Skew vertical
      $("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
      $("#box").css({ rotateY: 30 });
      $("#box").css({ rotate3d: [1, 1, 0, 45] });
      

      支持相对值。

      $("#box").css({ rotate: '+=30' });          // 30 degrees more
      $("#box").css({ rotate: '-=30' });          // 30 degrees less
      

      所有单位都是可选的。

      $("#box").css({ x: '30px' });
      $("#box").css({ x: 30 });
      

      多个参数可以是逗号或数组。

      $("#box").css({ translate: [60,30] });
      $("#box").css({ translate: ['60px','30px'] });
      $("#box").css({ translate: '60px,30px' });
      

      支持 Getters。(获取具有多个参数的属性会返回数组。)

      $("#box").css('rotate');     //=> "30deg"
      $("#box").css('translate');  //=> ['60px', '30px']
      

      动画 - $.fn.transition

      $('...').transition(options, [duration], [easing], [complete])
      

      您可以使用 CSS3 过渡动画 $.fn.transition()。$.fn.animate() 除了使用 CSS3 过渡之外,它的工作原理完全相同。

      $("#box").transition({ opacity: 0.1, scale: 0.3 });
      $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
      $("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
      $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
      $("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
      $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything
      

      你也可以传递持续时间和缓和并完成值 options,就像在里面一样 $.fn.animate()。

      $("#box").transition({
        opacity: 0.1, scale: 0.3,
        duration: 500,
        easing: 'in',
        complete: function() { /* ... */ }
      });
      

      测试

      Transit 拥有独特的测试套件。打开 test/index.html 看看吧。在进行修复时,请务必使用不同的 jQuery 版本和不同的浏览器对其进行测试。

      备择方案

      Velocity.js (推荐!)

      优点:针对数百个同时转换的情况进行了优化。很多额外的功能。

      Move.js

      优点:没有 jQuery 依赖,很棒的语法。 缺点(撰写时):没有 iOS 支持(不使用 translate3d),一些 IE 错误,没有 3D 转换,没有动画队列。

      jQuery animate enhanced

      优点:透明覆盖 $.fn.animate() 以提供 CSS 转换支持。 缺点:透明覆盖 $.fn.animate()。没有转换支持。

      jQuery 2D transformations

      优点:大量的转型。 缺点:没有 CSS 过渡支持;动画通过 fx.step。

      jQuery CSS3 rotate

      优点:简单地提供轮换。 缺点:只是提供轮换。没有过渡支持。

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录