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

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

 更新時(shí)間：2023年04月19日 10:11:43   作者：何遲  
這篇文章主要介紹了Vue動(dòng)畫之第三方類庫實(shí)現(xiàn)動(dòng)畫方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(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)識符，然后可以不停將轉(zhuǎn)換true/false，達(dá)到隱藏顯示的目的-->
            </transition>
            <!--將需要轉(zhuǎn)換的動(dòng)畫用transition承載，在頭部實(shí)現(xiàn)樣式-->
            <!--:duration可以一同設(shè)置進(jìn)場和出場的時(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    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è)置更大的值，可以在頁面中添加下面的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)文章

最新評論