实现跨浏览器CSS3 transitions效果的jQuery插件-灵象搜搜资源网

实现跨浏览器CSS3 transitions效果的jQuery插件

发布2020-11-07 浏览742次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长（171373236#qq.com）！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

tram.js是一款实现跨浏览器CSS3 transition效果的jQuery插件。tram.js旨在提高CSS3 transitions的性能和灵活性，并通过jQuery来定义它们。tram.js提供强大的API来实现auto-stopping、sequencing和跨浏览器等功能。

tram.js目前通过jQuery来实现，需要jQuery的主要原因有：

每个元素的 data API
跨浏览器的CSS getters/setters
scrollTop/Left偏移量的帮助

安装

可以通过npm或bower来安装tram.js。

npm install tram
bower install tram

使用方法

当该jQuery插件首次加载时，它将使用特性检测来判断浏览器是否支持CSS transitions。如果浏览器支持，Tram将管理样式并有浏览器来执行CSS动画。如果浏览器不支持，Tram将使用自己的补间动画引擎为每一帧动画设置样式，这个引擎是由requestAnimationFrame和performance.now()来驱动。

Tram可以通过AMD、CommonJS和浏览器的全局变量来调用。

var tram = window.tram;
// or
var tram = require('tram');

在你为一个元素添加过渡效果之前，你需要用tram()方法来包装它。它会在元素的data中存储一个Tram class实例。我们需要它来制作auto-stop和其它状态。

tram(element);

你也可以将它保存到一个变量中，这会在有大量元素的时候提供一些性能。

var myTram = tram(element); // optional

必须通过add()方法来定义每一个元素的属性。它和CSS3 transition的标准语法很类似：property-name duration easing-function delay。

tram(element).add('opacity 500ms ease-out');

当定义了一个过渡效果之后，它被存储在元素的data中。你可以在后面重新覆盖它，例如：

tram(element).add('opacity 2s'); // changed duration to 2 seconds

使用start()方法来开始元素的过渡动画。

tram(element).start({ opacity: 0.5 });

如果你需要在过渡动画结束时监听事件，可以通过then()方法来实现：

tram(element)
  .start({ opacity: 0.5 })
  .then(function () { console.log('done!') });

序列也可以使用then()方法：

tram(element)
  .start({ opacity: 0.5 })
  .then({ opacity: 1 })
  .then({ opacity: 0 });

Tram提供了一些虚拟属性来帮助完成CSS3 transforms。

tram(element)
  .add('transform 1s ease-out-quint')
  .start({ x: 100, rotate: 45 }); // aka: translateX(100px) rotate(45deg)

可以通过set()方法来设置元素的样式。这个方法会停止所有的transitions，并立刻开始设置给定的样式：

tram(element).set({ x: 0, opacity: 1 });

可以通过stop()方法来停止过渡动画。该方法会自动在start()或set()方法被调用是被触发。

tram(element).stop('opacity'); // specific property
tram(element).stop({ opacity: true, x: true }); // multiple properties
tram(element).stop(); // stops all property transitions