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将使用自己的补间动画引擎为每一帧动画设置样式,这个引擎是由requestAnimationFrameperformance.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
                

支持的属性

每个浏览器对DOM过渡属性的支持是有限的,Tram最大限度的覆盖了所有的跨浏览器属性,另外添加了一些扩展。

支持的属性(属性名/值)
  • 'color' //color
  • 'background' //color
  • 'outline-color' //color
  • 'border-color' //color
  • 'border-top-color' //color
  • 'border-right-color' //color
  • 'border-bottom-color' //color
  • 'border-left-color' //color
  • 'border-width' //length
  • 'border-top-width' //length
  • 'border-right-color' //length
  • 'border-bottom-color' //length
  • 'border-left-color' //length
  • 'border-spacing' //length
  • 'letter-spacing' //length
  • 'margin' //length
  • 'margin-top' //length
  • 'margin-right' //length
  • 'margin-bottom' //length
  • 'margin-left' //length
  • 'padding' //length
  • 'padding-top' //length
  • 'padding-right' //length
  • 'padding-bottom' //length
  • 'padding-left' //length
  • 'outline-width' //length
  • 'opacity' //number
  • 'top' //length, percentage
  • 'right' //length, percentage
  • 'bottom' //length, percentage
  • 'left' //length, percentage
  • 'font-size' //length, percentage
  • 'text-indent' //length, percentage
  • 'word-spacing' //length, percentage
  • 'width' //length, percentage
  • 'min-width' //length, percentage
  • 'max-width' //length, percentage
  • 'height' //length, percentage
  • 'min-height' //length, percentage
  • 'max-height' //length, percentage
  • 'line-height' //length, percentage
  • 'transform' //length, percentage
  • 'scroll-top' //length, percentage
  • 'scroll-left' //length, percentage
  • TODO - planned support
  • 'background-position' // [x, y] length, percentage
  • 'transform-origin' // [x, y] length, percentage
  • 'clip' // [x, y, w, h] rectangle
  • 'crop' // [x, y, w, h] rectangle

注意:.add()方法需要dash-style的名字,而其他方法如.start().stop()需要驼峰写法。

Transforms
  • 'x' // length, percentage
  • 'y' // length, percentage
  • 'z' // length, percentage
  • 'rotate' // angle
  • 'rotateX' // angle
  • 'rotateY' // angle
  • 'rotateZ' // angle
  • 'scale' // number
  • 'scaleX' // number
  • 'scaleY' // number
  • 'scaleZ' // number
  • 'skew' // angle
  • 'skewX' // angle
  • 'skewY' // angle
  • 'perspective' // length
Easings

// Defaults

  • 'ease'
  • 'ease-in'
  • 'ease-out'
  • 'ease-in-out'
  • 'linear'

// Quad

  • 'ease-in-quad'
  • 'ease-out-quad'
  • 'ease-in-out-quad'

// Cubic

  • 'ease-in-cubic'
  • 'ease-out-cubic'
  • 'ease-in-out-cubic'

// Quart

  • 'ease-in-quart'
  • 'ease-out-quart'
  • 'ease-in-out-quart'

// Quint

  • 'ease-in-quint'
  • 'ease-out-quint'
  • 'ease-in-out-quint'

// Sine

  • 'ease-in-sine'
  • 'ease-out-sine'
  • 'ease-in-out-sine'

// Expo

  • 'ease-in-expo'
  • 'ease-out-expo'
  • 'ease-in-out-expo'

// Circ

  • 'ease-in-circ'
  • 'ease-out-circ'
  • 'ease-in-out-circ'

// Back

  • 'ease-in-back'
  • 'ease-out-back'
  • 'ease-in-out-back'