美文网首页
uni-app 中使用swiper结合最新版animation动

uni-app 中使用swiper结合最新版animation动

作者: 这真的是一个帅气的名字 | 来源:发表于2020-12-29 15:12 被阅读0次
<template>
    <view class="block">
        <view class="mask">
            <swiper class="my_swiper" vertical="true">
                <swiper-item>
                    <view class="animate__animated animate__bounceIn">0000000000000</view>
                    <view class="animate__animated animate__fadeInTopLeft">33333333333333</view>
                    <view class="animate__animated animate__bounce">44444444444444</view>
                    <view class="animate__animated animate__bounce animate__delay-2s">Example</view>
                    <view class="animate__animated animate__fadeInTopRight">55555555555555</view>
                    <view class="animate__animated animate__fadeInLeftBig">66666666666666</view>
                    <view class="animate__animated animate__lightSpeedInRight">77777777777777</view>

                </swiper-item>
                <swiper-item>
                    22222222
                </swiper-item>
                <swiper-item>
                    33333333333
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>
<style scoped src='./animate.min.css'></style>
<style>
    .mask {
        /* position: fixed;
        top: 0;
        left: 0; */
        width: 100%;
        height: 100%;
        /* display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        z-index: 5; */

    }

    .my_swiper {
        width: 100%;
        height: 100vh;
    }
</style>

animate.min.css下载地址:https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
文档地址:https://animate.style/

相关文章

网友评论

      本文标题:uni-app 中使用swiper结合最新版animation动

      本文链接:https://www.haomeiwen.com/subject/yjnfoktx.html