1. はじめに
ページ上でシェイク、フラッシュ、バウンス、反転、回転 (rotateIn/rotateOut)、フェードイン/フェードアウトなどのアニメーション効果を実現できるように支援します。自分でjqコードを書く必要がなく、ライブラリがカプセル化されているので参照して呼び出すだけで済むため、作業負荷が大幅に軽減されます。
2.アドレスを取得する
公式サイト：http://www.animate.net.cn/
ダウンロードファイルアドレス（使い方は下記）：https://www.dowebok.com/98.html
エフェクトを見る（これは素晴らしいです、クリックしてコピーしてください） ）：https: //animate.style/
3. 事例展示
1. ディレクトリ構造の表示:
2. コード:
<!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. エフェクトの表示 (この時点ではクリックによってトリガーされます)
4. デフォルトでアニメーションを無限ループで表示したい場合は、クラス名を追加するだけです: infinite。
コード：
<!-- 第一个类名是必写参数、第二个类名是动画名称（此时是抖动）、第三个类名控制无限循环。 -->
<div id="dowebok" class="animated shake infinite">
测试
</div>
効果のデモンストレーション:
4. まとめ
- すべてのコンテンツは公式 Web サイトに掲載されており、自分で調べることができます。
- アニメーションはanimate.min.cssを導入するだけで済みますが、後からjqを使って要素を制御したい場合はjq.min.jsを導入する必要があります。
- 無限ループにはクラス名を追加する必要があります:
infinite。