纯js轻量级高性能点击元素动画特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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：动画结束之后的回调函数。