1. Introduction
Assist us to achieve some animation effects on the page, such as shake, flash, bounce, flip, rotate (rotateIn/rotateOut), fadeIn/fadeOut, etc. We don't need to write jq code ourselves. The library is encapsulated. We only need to reference and call it, which greatly reduces our workload.
2. Obtain the address
Official website: http://www.animate.net.cn/
Download file address (how to use it below): https://www.dowebok.com/98.html
View the effect (this is great, click to copy): https://animate.style/
3. Case display
1. Directory structure display:
2. Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jQuery.min.js"></script>
<link rel="stylesheet" href="./css/animate.min.css">
</head>
<body>
<div id="dowebok">
测试
</div>
<script>
$(function() {
$('#dowebok').click(function() {
$(this).addClass('animated flipOutX'); //这个animated是必须要写的，不写不生效。
setTimeout(function() {
//完成此动画之后，把动画类名移除掉，这样再点击又能添加类名，执行动画。
$('#dowebok').removeClass('animated flipOutX');
}, 1000);
})
});
</script>
</body>
</html>
3. Effect display (at this time it is triggered by click)
4. If you want the animation to be displayed in an infinite loop by default, you only need to add a class name: infinite.
Code:
<!-- 第一个类名是必写参数、第二个类名是动画名称（此时是抖动）、第三个类名控制无限循环。 -->
<div id="dowebok" class="animated shake infinite">
测试
</div>
Effect demonstration:
4. Summary
- All content is on the official website and you can explore it yourself.
- Animation only needs to introduce animate.min.css. If you want to use jq to control elements later, you need to introduce jq.min.js.
- Infinite loop needs to add class name:
infinite.