欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue動畫之第三方類庫實現(xiàn)動畫方式

 更新時間：2023年04月19日 10:11:43   作者：何遲  
這篇文章主要介紹了Vue動畫之第三方類庫實現(xiàn)動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue第三方類庫實現(xiàn)動畫

注意：

1.使用了Animate類庫，方便直接調(diào)用各種動畫。點擊進(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>
                <!--通過一個標(biāo)識符，然后可以不停將轉(zhuǎn)換true/false，達(dá)到隱藏顯示的目的-->
            </transition>
            <!--將需要轉(zhuǎn)換的動畫用transition承載，在頭部實現(xiàn)樣式-->
            <!--:duration可以一同設(shè)置進(jìn)場和出場的時間，:duration="{enter:1000,leave:4000}分別設(shè)置"-->
        </div>
    </div>
 
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:false
            }
        })
    </script>
</body>
</html>

效果：

vue中常用的動畫庫

<div data-aos="fade-up"></div>
mounted() {
? ? ?AOS.init();
? ? ?// 你也可以在這里設(shè)置全局配置
? ? ? AOS.init({
? ? ? ? offset: 200, ??
? ? ? ? duration: 600, ? //持續(xù)時間
? ? ? ? easing: 'ease-in-sine', ??
? ? ? ? delay: 100
? ? ?})
? ? },

animista-可直接插入使用

網(wǎng)址：https://animista.net/play/basic/scale-up

AOS.js滾動動畫庫

官網(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";

其他動畫效果可查看官網(wǎng)

<div data-aos="fade-up" data-aos-offset="200"></div>
mounted() {
? ? ?AOS.init();
? ? ?// 你也可以在這里設(shè)置全局配置
? ? ? AOS.init({
? ? ? ? offset: 200, ??
? ? ? ? duration: 600, ? //持續(xù)時間
? ? ? ? easing: 'ease-in-sine', ??
? ? ? ? delay: 100
? ? ?})
? ? },

在元素上還可以添加以下一些屬性：

屬性描述示例值默認(rèn)值

  • data-aos-offset    是立刻觸發(fā)動畫還是在指定時間之后觸發(fā)動畫    200    120
  • data-aos-duration    動畫持續(xù)時間    600    400
  • data-aos-easing    動畫的easing動畫效果    ease-in-sine    ease
  • data-aos-delay        動畫的延遲時間        300        0
  • data-aos-anchor        錨元素。使用它的偏移來取代實際元素的偏移來觸發(fā)動畫    #selector    null
  • data-aos-anchor-placement    錨位置，觸發(fā)動畫時元素位于屏幕的位置        top-center    top-bottom
  • data-aos-once動畫是否只會觸發(fā)一次，或者每次上下滾動都會觸發(fā)                true        false

*注意，aos-duration的動畫持續(xù)時間的范圍從50-3000毫秒，如果你想設(shè)置更大的值，可以在頁面中添加下面的CSS代碼

body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{ ? ?transition-duration: 4000ms;}

上面的代碼將動畫的持續(xù)時間修改為4000毫秒。

禁用AOS

在小屏幕中禁用

AOS.init({
? disable: 'mobile'
});

設(shè)置條件如小于1024像素

disable: window.innerWidth < 1024

或者傳入函數(shù)

disable: function () {
? ? var maxWidth = 1024;
? ? return window.innerWidth < maxWidth;
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論