Vue はサードパーティを通じて Animate.css を統合し、シンプルで高速なアニメーションを実現します. クラス名の参照により、Animate のすべてのアニメーションを簡単に実現できます. Animate.css は強力なプリセット css3 アニメーション ライブラリです. Animate.css には多くの典型的な css3 が組み込まれています.アニメーションとの相性が良く、使いやすいです。
解決すべき問題
1. マウスの出入りイベントを表示します (画面のちらつきを防ぐため)。
2. Animate.cssアニメーションライブラリの統合利用
vue マウスの移動
- マウスイベント「mouseover と mouseout」と「mouseenter と mouseleave」の違い
マウスがノードに入ると、mouseover イベントと mouseenter イベントの両方がトリガーされます。2 つの違いは、mouseenter イベントが 1 回だけトリガーされ、マウスがノード内で移動している限り、子ノードで mouseover イベントが複数回トリガーされることです。
マウスがノードから離れると、mouseout イベントと mouseleave イベントの両方がトリガーされます。2 つの違いは、子要素が親要素内にある場合、mouseleave イベントはトリガーされませんが、mouseout イベントはトリガーされることです。
そのため、「mouseover と mouseout」を使用すると、子ノードでもイベントがトリガーされるため、画面のちらつきの問題が発生します。画面のちらつきの問題を回避するには、「mouseenter と mouseleave」を使用することをお勧めします。
Animate.cssアニメーションライブラリ統合利用
1. Animate.css を vue プロジェクトにインストール (npm インストール)
npm install animate.css 3. プロジェクトは Animate.css を使用します
1、要想使用animate.css, 需要把相关标签用<transition>.....</transition>进行包裹，只能包裹单个标签。
2、使用<transition-group>.....</transition-group>可以包裹多个标签，注意一定要加key 这个属性值
3、appear :表示一上来就有动画效果。相当于：:appear = 'true'<template>
<div class="hu_sidebar">
<div class="hu_qrcode">
<a-icon class="tzc_qrcode" type="qrcode" @mouseenter="sidebar()" @mouseleave="sidebar2()"/>
<transition
appear//appear:一上来就有动画效果
name="animate__animated animate__bounce"//animate初始类名
enter-active-class="animate__fadeIn"//enter-active-class:设置进入的动画类名
leave-active-class="animate__bounceOutRight"//leave-active-class:设置离开的动画类名
>
<div ref="message" class="hu_qrcode_obtain" v-show="flag">
<div class="hu_q_img">
<img :src="Qrcode.img" alt="">
</div>
<div class="hu_q_title">{
{Qrcode.title}}</div>
</div>
</transition>
</div>
</div>
</template>
<script>
import { getccconfig } from "@/api/pub_api.js";
export default {
data() {
return {
flag:false,
Qrcode:{}
};
},
mounted() {
this.Qrcode_obtain();
},
methods: {
sidebar(){
this.flag=true
},
sidebar2(){
this.flag=false
},
Qrcode_obtain(){
let query = {
info: 'PCqrcode'
};
getccconfig(query).then((res) => {
this.Qrcode=res.data.mydata;
console.log('qrcode', res)
}).catch((err) => {
console.log(err)
});
}
},
};
</script>
5. Animate.cssの詳細クラス一覧
| 注目を求める人 | |
| animate__bounce | 跳ねる、弾む |
| animate__flash | 閃光 |
| animate__pulse | 脈 |
| animate__rubberBand | 輪ゴム |
| animate__shakeX | X軸を振る |
| animate__shakeY | Y軸を振る |
| animate__headShake | 頭を横に振る |
| animate__swing | スイング |
| animate__tada | それから |
| animate__ぐらつき | 振る |
| animate__jello | ゼリー |
| animate__heartBeat | ハートビート |
| 裏口 | |
| animate__backInDown | あとずさりする |
| animate__backInLeft | 左後ろ |
| animate__backInRight | 右後 |
| animate__backInUp | あとずさりする |
| バック出口 | |
| animate__backOutDown | あとずさりする |
| animate__backOutLeft | 左後ろ |
| animate__backOutLeft | 右に戻る |
| animate__backOutUp | あとずさりする |
| 跳ねる入り口 | |
| animate__bounceIn | 跳ねる、弾む |
| animate__bounceInDown | 跳ね返る |
| animate__bounceInLeft | 左に跳ねる |
| animate__bounceInRight | 右バウンス |
| animate__bounceInUp | リバウンド |
| バウンス出口 | |
| animate__bounceOut | 跳ねる、弾む |
| animate__bounceOutDown | 跳ね返る |
| animate__bounceOutLeft | 左に跳ねる |
| animate__bounceOutRight | 右に跳ねる |
| animate__bounceOutUp | 跳ね上がる |
| 消えゆく入り口 | |
| animate__fadeIn | フェードイン |
| animate__fadeInDown | フェードインとフェードアウト |
| animate__fadeInDownBig | フェード大 |
| animate__fadeInLeft | 左にフェード |
| animate__fadeInLeftBig | 左に大きくフェードイン |
| animate__fadeInRight | フェードライト |
| animate__fadeInRightBig | フェードイン右大 |
| animate__fadeInUp | フェードアップ |
| animate__fadeInUpBig | 大きくフェードイン |
| animate__fadeInTopLeft | 左上にフェードイン |
| animate__fadeInTopRight | 右上フェード |
| animate__fadeInBottomLeft | 淡入左下 |
| animate__fadeInBottomRight | 淡入右下 |
| Fading exits | |
| animate__fadeOut | 消退 |
| animate__fadeOutDown | 淡出淡出 |
| animate__fadeOutDownBig | 淡出淡出大 |
| animate__fadeOutLeft | 淡出左 |
| animate__fadeOutLeftBig | 淡出左大 |
| animate__fadeOutRight | 淡出右移 |
| animate__fadeOutRightBig | 淡出右大 |
| animate__fadeOutUp | 淡出向上 |
| animate__fadeOutUpBig | 淡出向上大 |
| animate__fadeOutTopLeft | 淡出左上角 |
| animate__fadeOutTopRight | 淡出右上角 |
| animate__fadeOutBottomRight | 淡出右下角 |
| animate__fadeOutBottomLeft | 淡出左下角 |
| Flippers | |
| animate__flip | 翻动 |
| animate__flipInX | 翻转X轴 |
| animate__flipInY | 翻转Y轴 |
| animate__flipOutX | 翻转输出X轴 |
| animate__flipOutY | 翻转输出Y轴 |
| Lightspeed | |
| animate__lightSpeedInRight | 右光速弹动 |
| animate__lightSpeedInLeft | 左光速弹动 |
| animate__lightSpeedOutRight | 右光速弹动消失 |
| animate__lightSpeedOutLeft | 左光速弹动消失 |
| Rotating entrances | |
| animate__rotateIn | 旋转输入 |
| animate__rotateInDownLeft | 向左下旋转 |
| animate__rotateInDownRight | 向右下旋转 |
| animate__rotateInUpLeft | 向左上旋转 |
| animate__rotateInUpRight | 右回転 |
| 回転出口 | |
| animate__rotateOut | ロータリー出力 |
| animate__rotateOutDownLeft | 左に回すと消えます |
| animate__rotateOutDownRight | 右回転で消える |
| animate__rotateOutUpLeft | 左に回転して消える |
| animate__rotateOutUpRight | 右回転で消える |
| 特別 | |
| animate__hinge | ヒンジ |
| animate__jackInTheBox | 回転点滅バウンス |
| animate__rollIn | ロールイン |
| animate__rollOut | ロールアウトする |
| 入り口のズーミング | |
| animate__zoomIn | 拡大する |
| animate__zoomInDown | ズームアウト ズームアウト |
| animate__zoomInLeft | 左にズーム |
| animate__zoomInRight | 右にズーム |
| animate__zoomInUp | 下から上にズームイン |
| ズーム終了 | |
| animate__zoomOut | ズームアウトする |
| animate__zoomOutDown | ズームイン ズームアウト 消える |
| animate__zoomOutLeft | 左にズームアウト |
| animate__zoomOutRight | 右にズームアウト |
| animate__zoomOutUp | 下から上にズームアウト |
| スライド式入口 | |
| animate__slideInDown | 滑り落ちる |
| animate__slideInLeft | 左にスライド |
| animate__slideInRight | 右にスライド |
| animate__slideInUp | 上にスライドします |
| スライディング出口 | |
| animate__slideOutDown | 滑り落ちる |
| animate__slideOutLeft | 左にスライド |
| animate__slideOutRight | 右にスライド |
| animate__slideOutUp | 上にスライドします |
この記事はオリジナルであり、オリジナルであることは容易ではありません. 転載する必要がある場合は、著者に連絡して許可を得てください.