animate.css 官方,animateCSS

大家好，又见面了，我是你们的朋友全栈君。

animateCSS是什么

什么是animateCSS，Animate CSS jQuery Plugin

animateCSS官网：官网

animateCSS文档：文档

animateCSS源码仓库：源码仓库

animateCSS下载地址：点此下载 点此下载2

animateCSS介绍、animateCSS使用

A jQuery plugin to dynamically apply Dan Eden’s animate.css animations with callbacks

Getting Started

Bower

Install with Bower bower install animateCSS

Download

In your web page:

$(document).ready( function(){

$(‘#your-id’).animateCSS(“fadeIn”);

});

Documentation

{

infinite: false, // True or False

animationClass: “animated”, // Can be any class

delay: 0 // Can be any value (in ms)

duration: 1000 // Can be any value (in ms)

callback: // Any function

}

When using infinite: true and a delay, the delay will only occur before the first loop, not on every loop.

Examples

Basic

$(‘#your-id’).animateCSS(‘fadeIn’);

With callback

$(‘#your-id’).animateCSS(‘fadeIn’, function(){

console.log(‘Boom! Animation Complete’);

});

With delay (in ms)

$(‘#your-id’).animateCSS(‘fadeIn’, {delay: 500});

With delay AND callback

$(‘#your-id’).animateCSS(‘fadeIn’, {

delay: 1000,

callback: function(){

console.log(‘Boom! Animation Complete’);

}

});

With duration (in ms)

$(‘#your-id’).animateCSS(‘fadeIn’, {duration: 3000});

Chain multiple animations

If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback.

$(‘#your-id’).animateCSS(‘fadeInUp’, function() {

console.log(‘Boom! First animation Complete’);

$(this).animateCSS(“fadeOutUp”, function(){

console.log(‘Boom Boom! Second animation Complete’);

})

});

Offset animations

You can offset animations by using the delay mechanism

$(‘#your-id’).animateCSS(‘fadeIn’);

$(‘#another-id’).animateCSS(‘fadeIn’, {delay:100});

If you want to hide an element when the page loads and then apply an effect, it might look something like this:

.js #your-id {

visibility:hidden;

}$(window).load( function(){

$(‘#your-id’).animateCSS(‘fadeIn’, function(){

console.log(‘Boom! Animation Complete’);

});

});

Release History

Please consult the official changelog

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157802.html原文链接：https://javaforall.cn