285 lines
7.8 KiB
Vue
285 lines
7.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="itemlist list-animation">
|
|
<view class="item">
|
|
<view class="ld infinite ld-blur-in"></view>
|
|
<view>blur-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-blur-out"></view>
|
|
<view>blur-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-bounce-alt-in"></view>
|
|
<view>bounce-alt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-bounce-alt-out"></view>
|
|
<view>bounce-alt-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-bounce-in"></view>
|
|
<view>bounce-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-bounce-out"></view>
|
|
<view>bounce-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-fade-in"></view>
|
|
<view>fade-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-fade-out"></view>
|
|
<view>fade-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-fall-btt-in"></view>
|
|
<view>fall-btt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-fall-ltr-in"></view>
|
|
<view>fall-ltr-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-fall-rtl-in"></view>
|
|
<view>fall-rtl-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-fall-ttb-in"></view>
|
|
<view>fall-ttb-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-flip-h-in"></view>
|
|
<view>flip-h-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-flip-h-out"></view>
|
|
<view>flip-h-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-flip-v-in"></view>
|
|
<view>flip-v-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-flip-v-out"></view>
|
|
<view>flip-v-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-float-btt-in"></view>
|
|
<view>float-btt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-float-btt-out"></view>
|
|
<view>float-btt-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-float-ltr-in"></view>
|
|
<view>float-ltr-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-float-ltr-out"></view>
|
|
<view>float-ltr-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-float-rtl-in"></view>
|
|
<view>float-rtl-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-float-rtl-out"></view>
|
|
<view>float-rtl-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-float-ttb-in"></view>
|
|
<view>float-ttb-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-float-ttb-out"></view>
|
|
<view>float-ttb-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-grow-btt-in"></view>
|
|
<view>grow-btt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-grow-btt-out"></view>
|
|
<view>grow-btt-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-grow-ltr-in"></view>
|
|
<view>grow-ltr-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-grow-ltr-out"></view>
|
|
<view>grow-ltr-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-grow-rtl-in"></view>
|
|
<view>grow-rtl-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-grow-rtl-out"></view>
|
|
<view>grow-rtl-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-grow-ttb-in"></view>
|
|
<view>grow-ttb-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-grow-ttb-out"></view>
|
|
<view>grow-ttb-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-jump-alt-in"></view>
|
|
<view>jump-alt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-jump-alt-out"></view>
|
|
<view>jump-alt-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-jump-in"></view>
|
|
<view>jump-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-jump-out"></view>
|
|
<view>jump-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-power-off"></view>
|
|
<view>power-off</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-power-on"></view>
|
|
<view>power-on</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-rush-btt-in"></view>
|
|
<view>rush-btt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-rush-ltr-in"></view>
|
|
<view>rush-ltr-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-rush-rtl-in"></view>
|
|
<view>rush-rtl-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-rush-ttb-in"></view>
|
|
<view>rush-ttb-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-slide-btt-in"></view>
|
|
<view>slide-btt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-slide-btt-out"></view>
|
|
<view>slide-btt-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-slide-ltr-in"></view>
|
|
<view>slide-ltr-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-slide-ltr-out"></view>
|
|
<view>slide-ltr-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-slide-rtl-in"></view>
|
|
<view>slide-rtl-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-slide-rtl-out"></view>
|
|
<view>slide-rtl-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-slide-ttb-in"></view>
|
|
<view>slide-ttb-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-slide-ttb-out"></view>
|
|
<view>slide-ttb-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-spring-btt-in"></view>
|
|
<view>spring-btt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-spring-ltr-in"></view>
|
|
<view>spring-ltr-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-spring-rtl-in"></view>
|
|
<view>spring-rtl-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-spring-ttb-in"></view>
|
|
<view>spring-ttb-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-throw-btt-in"></view>
|
|
<view>throw-btt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-throw-ltr-in"></view>
|
|
<view>throw-ltr-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-throw-rtl-in"></view>
|
|
<view>throw-rtl-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-throw-ttb-in"></view>
|
|
<view>throw-ttb-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-vortex-alt-in"></view>
|
|
<view>vortex-alt-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-vortex-alt-out"></view>
|
|
<view>vortex-alt-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-vortex-in"></view>
|
|
<view>vortex-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-vortex-out"></view>
|
|
<view>vortex-out</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-zoom-in"></view>
|
|
<view>zoom-in</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="ld infinite ld-zoom-out"></view>
|
|
<view>zoom-out</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
</script>
|
|
|
|
<style>
|
|
@import url('../../components/transition-min/transition.min.css');
|
|
|
|
.item {
|
|
width: 250rpx;
|
|
height: 250rpx;
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
.list-animation .item view:first-child {
|
|
margin: 32px auto;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 3px;
|
|
background: linear-gradient(45deg, #444 0%, #444 15%, transparent 15%, transparent 18%, #444 10%);
|
|
}
|
|
</style>
|