纯js轻量级高性能点击元素动画特效插件

cta.js或叫做"Call to Animation"是一款轻量级高性能的点击元素动画特效js插件。该插件可以在页面上通过点击某个元素来使其它任何元素产生动画效果。这个js插件可以制作出效果非常酷的元素动画视觉效果。

安装

可以通过Bower或NPM来安装该js插件。

bower install cta
npm install cta                
              

cta.js同时也支持AMD 和 commonJS模式。

使用方法

通常情况下，你可以使用选择器selector X选择一个元素，并通过该元素使另外一个元素selector Y产生动画效果。

var e1 = document.querySelector(X),
    e2 = document.querySelector(Y);
cta(e1, e2);                
              

触发一个反转动画可以如下：

var e1 = document.querySelector('#js-source-element'),
    e2 = document.querySelector('#js-target-element');
var reverseAnimate = cta(e1, e2);

// Reverse previous animation. `options` and `callback` can be passed to this function too.
reverseAnimate();                
              

指定动画的持续时间：

var e1 = document.querySelector('#js-source-element'),
    e2 = document.querySelector('#js-target-element');
cta(e1, e2, {
    duration: 0.3 // seconds
});                
              

在动画之后执行指定的回调函数：

var button = document.querySelector('#js-button'),
    hiddenModal = document.querySelector('#js-modal');
cta(button, hiddenModal, function () {
    showModal();
});                
              

公共API

cta(sourceElement, targetElement [, options] [, callback] )

在targetElement目标元素上动画一个元素sourceElement。

• sourceElement：动画开始时的DOM元素。
• targetElement：动画结束时的DOM元素。
• options：一组控制动画效果的参数。
  • duration：动画的持续时间，单位秒。默认值是0.3秒。
  • targetShowDuration：targetElement元素变为可见状态的时间（如果它开始时隐藏状态），单位秒。默认值0秒。
  • relativeToWindow：如果目标元素是固定在窗口中的，设置为true。默认目标元素是相对于文档单位。
• callback：动画结束之后的回调函数。

浏览器兼容

该js插件可以很好的工作在最新版本的Google Chrome、Firefox 和 Safari浏览器上。

对于不支持该js插件的浏览器，插件不做任何处理，它会回退到默认的行为，你需要手动添加回退代码。