大家好，又见面了，我是你们的朋友全栈君。
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
