Vue動(dòng)畫之第三方類庫實(shí)現(xiàn)動(dòng)畫方式
更新時(shí)間：2023年04月19日 10:11:43 作者：何遲
這篇文章主要介紹了Vue動(dòng)畫之第三方類庫實(shí)現(xiàn)動(dòng)畫方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue第三方類庫實(shí)現(xiàn)動(dòng)畫
注意：
1.使用了Animate類庫，方便直接調(diào)用各種動(dòng)畫。點(diǎn)擊進(jìn)入官網(wǎng)
2.用法大致同Bootstrap
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../lib/animate.css" rel="external nofollow" >
</head>
<body>
<div id="app">
<div>
<input type="button" value="顯示/隱藏" @click="flag=!flag" :duration="2000">
<transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
<h3 v-if="flag">陳小帥是真的帥！</h3>
<!--通過一個(gè)標(biāo)識(shí)符，然后可以不停將轉(zhuǎn)換true/false，達(dá)到隱藏顯示的目的-->
</transition>
<!--將需要轉(zhuǎn)換的動(dòng)畫用transition承載，在頭部實(shí)現(xiàn)樣式-->
<!--:duration可以一同設(shè)置進(jìn)場(chǎng)和出場(chǎng)的時(shí)間，:duration="{enter:1000,leave:4000}分別設(shè)置"-->
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:false
}
})
</script>
</body>
</html>效果：
vue中常用的動(dòng)畫庫
<div data-aos="fade-up"></div>
mounted() {
? ? ?AOS.init();
? ? ?// 你也可以在這里設(shè)置全局配置
? ? ? AOS.init({
? ? ? ? offset: 200, ??
? ? ? ? duration: 600, ? //持續(xù)時(shí)間
? ? ? ? easing: 'ease-in-sine', ??
? ? ? ? delay: 100
? ? ?})
? ? },animista-可直接插入使用
網(wǎng)址：https://animista.net/play/basic/scale-up
AOS.js滾動(dòng)動(dòng)畫庫
官網(wǎng)：https://www.xyhtml5.com/examples/aos/
- 第一步：npm install aos --save
- 第二步在main.js中：
import AOS from "aos"; import "../node_modules/aos/dist/aos.css"; Vue.use(AOS)
- 第三步：在當(dāng)前組件引入import AOS from "aos";
其他動(dòng)畫效果可查看官網(wǎng)
<div data-aos="fade-up" data-aos-offset="200"></div>
mounted() {
? ? ?AOS.init();
? ? ?// 你也可以在這里設(shè)置全局配置
? ? ? AOS.init({
? ? ? ? offset: 200, ??
? ? ? ? duration: 600, ? //持續(xù)時(shí)間
? ? ? ? easing: 'ease-in-sine', ??
? ? ? ? delay: 100
? ? ?})
? ? },在元素上還可以添加以下一些屬性：
屬性描述示例值默認(rèn)值
data-aos-offset是立刻觸發(fā)動(dòng)畫還是在指定時(shí)間之后觸發(fā)動(dòng)畫 200 120data-aos-duration動(dòng)畫持續(xù)時(shí)間 600 400data-aos-easing動(dòng)畫的easing動(dòng)畫效果 ease-in-sine easedata-aos-delay動(dòng)畫的延遲時(shí)間 300 0data-aos-anchor錨元素。使用它的偏移來取代實(shí)際元素的偏移來觸發(fā)動(dòng)畫 #selector nulldata-aos-anchor-placement錨位置，觸發(fā)動(dòng)畫時(shí)元素位于屏幕的位置 top-center top-bottomdata-aos-once動(dòng)畫是否只會(huì)觸發(fā)一次，或者每次上下滾動(dòng)都會(huì)觸發(fā) true false
*注意，aos-duration的動(dòng)畫持續(xù)時(shí)間的范圍從50-3000毫秒，如果你想設(shè)置更大的值，可以在頁面中添加下面的CSS代碼
body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{ ? ?transition-duration: 4000ms;}上面的代碼將動(dòng)畫的持續(xù)時(shí)間修改為4000毫秒。
禁用AOS
在小屏幕中禁用
AOS.init({
? disable: 'mobile'
});設(shè)置條件如小于1024像素
disable: window.innerWidth < 1024
或者傳入函數(shù)
disable: function () {
? ? var maxWidth = 1024;
? ? return window.innerWidth < maxWidth;
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中關(guān)于i18n字符串轉(zhuǎn)義問題
這篇文章主要介紹了vue3中關(guān)于i18n字符串轉(zhuǎn)義問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
解決vue項(xiàng)目本地啟動(dòng)時(shí)無法攜帶cookie的問題
這篇文章主要介紹了解決vue項(xiàng)目本地啟動(dòng)時(shí)無法攜帶cookie,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了詳解Vue.js入門環(huán)境搭建，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開
這篇文章主要介紹了Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Element?el-date-picker?日期選擇器的使用
本文主要介紹了Element?el-date-picker?日期選擇器的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue 路由組件傳參的 8 種方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
在使用 Vue 開發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級(jí)的技術(shù)點(diǎn)，總會(huì)有用的，本文就介紹了15個(gè)Vue技巧，具有一定的參考價(jià)值，感興趣的可以了解一下2022-02-02