溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用Vue第三方類庫(kù)實(shí)現(xiàn)動(dòng)畫

發(fā)布時(shí)間：2023-04-19 15:55:51 來源：億速云 閱讀：150 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“怎么使用Vue第三方類庫(kù)實(shí)現(xiàn)動(dòng)畫”，在日常操作中，相信很多人在怎么使用Vue第三方類庫(kù)實(shí)現(xiàn)動(dòng)畫問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么使用Vue第三方類庫(kù)實(shí)現(xiàn)動(dòng)畫”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

    Vue第三方類庫(kù)實(shí)現(xiàn)動(dòng)畫

    注意：

    1.使用了Animate類庫(kù)，方便直接調(diào)用各種動(dò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">
                <h4 v-if="flag">陳小帥是真的帥！</h4>
                <!--通過一個(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)畫庫(kù)

    <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-可直接插入使用

    AOS.js滾動(dòng)動(dòng)畫庫(kù)

    • 第一步：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    120

    • data-aos-duration    動(dòng)畫持續(xù)時(shí)間    600    400

    • data-aos-easing    動(dòng)畫的easing動(dòng)畫效果    ease-in-sine    ease

    • data-aos-delay        動(dòng)畫的延遲時(shí)間        300        0

    • data-aos-anchor        錨元素。使用它的偏移來取代實(shí)際元素的偏移來觸發(fā)動(dòng)畫    #selector    null

    • data-aos-anchor-placement    錨位置，觸發(fā)動(dòng)畫時(shí)元素位于屏幕的位置        top-center    top-bottom

    • data-aos-once動(dòng)畫是否只會(huì)觸發(fā)一次，或者每次上下滾動(dòng)都會(huì)觸發(fā)                true        false

    *注意，aos-duration的動(dòng)畫持續(xù)時(shí)間的范圍從50-3000毫秒，如果你想設(shè)置更大的值，可以在頁(yè)面中添加下面的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;
}

    到此，關(guān)于“怎么使用Vue第三方類庫(kù)實(shí)現(xiàn)動(dòng)畫”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

    向AI問一下細(xì)節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    vue
    AI
    助
    手