【快应用】swiper组件内容切换动画实现

华为开发者论坛

于 2023-05-12 09:28:24 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44708240/article/details/130635198

本文介绍了如何在快应用的Swiper组件中添加内容切换的动画效果。通过设置page-transform-origin、transform、page-animation-name和animation-timing-function属性，并利用@keyframes支持的transform属性，如translate和scale，实现滑动时的内容缩放动画。详细实现步骤及注意事项文中均有说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【问题背景】

Swiper组件内的items切换时，滑动的效果比较单调，是否可以在滑动时加入一个切换的动画效果呢？

【问题分析】

Swiper组件在1080版本之后推出了页面切换动画的样式，支持在swiper组件轮播时展示动画效果，比如缩小或者旋转之类的。

【实现方案】

可以通过设置样式page-transform-origin、tranform、page-animation-name和animation-timing-function属性来设置想要的动画效果。

下面代码就对swiper组件内的内容切换时实现了一个缩放的动画效果。

<template>
  <div class="item-container">
    <div class="swiper-container">
      <swiper class="swiper sampleAnimation" autoplay="true">
        <image src="/Common/a.jpg" style="width: 100%; height: 250px"></image>
        <image src="/Common/b.jpg" style="width: 100%; height: 250px"></image>
        <image src="/Common/c.jpg" style="width: 100%; height: 250px"></image>
        <image src=