<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/
网友评论