feat(SummerCampCard): 添加卡片效果动画以增强用户体验
在SummerCampCard组件中引入了Swiper的EffectCards模块,为卡片切换添加了平滑的动画效果。这包括卡片切换时的平移和透明度变化,以及调整了切换速度,以提升用户交互体验。
Showing
1 changed file
with
15 additions
and
2 deletions
| ... | @@ -45,9 +45,10 @@ | ... | @@ -45,9 +45,10 @@ |
| 45 | <script setup> | 45 | <script setup> |
| 46 | import { defineProps, onMounted, ref } from 'vue' | 46 | import { defineProps, onMounted, ref } from 'vue' |
| 47 | import Swiper from 'swiper' | 47 | import Swiper from 'swiper' |
| 48 | -import { Pagination } from 'swiper/modules' | 48 | +import { Pagination, EffectCards } from 'swiper/modules' |
| 49 | import 'swiper/css' | 49 | import 'swiper/css' |
| 50 | import 'swiper/css/pagination' | 50 | import 'swiper/css/pagination' |
| 51 | +import 'swiper/css/effect-cards' | ||
| 51 | 52 | ||
| 52 | const props = defineProps({ | 53 | const props = defineProps({ |
| 53 | items: { | 54 | items: { |
| ... | @@ -69,7 +70,19 @@ const swiperRef = ref(null) | ... | @@ -69,7 +70,19 @@ const swiperRef = ref(null) |
| 69 | 70 | ||
| 70 | onMounted(() => { | 71 | onMounted(() => { |
| 71 | new Swiper(swiperRef.value, { | 72 | new Swiper(swiperRef.value, { |
| 72 | - modules: [Pagination], | 73 | + modules: [Pagination, EffectCards], |
| 74 | + effect: 'creative', | ||
| 75 | + creativeEffect: { | ||
| 76 | + prev: { | ||
| 77 | + translate: ['-100%', 0, 0], | ||
| 78 | + opacity: 0 | ||
| 79 | + }, | ||
| 80 | + next: { | ||
| 81 | + translate: ['100%', 0, 0], | ||
| 82 | + opacity: 0 | ||
| 83 | + } | ||
| 84 | + }, | ||
| 85 | + speed: 600, | ||
| 73 | pagination: { | 86 | pagination: { |
| 74 | el: '.swiper-pagination', | 87 | el: '.swiper-pagination', |
| 75 | clickable: true | 88 | clickable: true | ... | ... |
-
Please register or login to post a comment