利用vue的transition实现多种轮播效果

最新推荐文章于 2025-06-26 20:41:26 发布

原创

最新推荐文章于 2025-06-26 20:41:26 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何利用Vue的transition组件结合animate.css创建多种轮播效果，但注意到在图片切换时可能出现轻微闪烁问题，这需要设置容器高度来避免。然而，这种方式不支持平滑的滑动过渡，限制了其实用性。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换测试</title>
    <link rel="stylesheet" href="./vue/lib/css/animate.min.css">
    <!--<script src="./vue/src/vue.js"></script>-->
    <script src="./jquery-1.7.2.min.js"></script>
    <script src="./vue.js"></script>
    <link href="./vue/theme-default/index.css" rel="stylesheet">
    <!--<link href="../vue/lib/element.css" rel="stylesheet">-->
    <link href="./vue/lib/css/main.css" rel="stylesheet">
    <link href="./vue/_fonts/font-awesome.min.css" rel="stylesheet">
    <style>
        .articleListMod-3 .articleList-box{
            width: 100%;
        }
        .text{
            text-align: center;
        }

        div{
            /*display: inline-block;*/
            width: 1500px;
        }
        .transition_div {
            height: 500px;
            width: 100%;
        }
        .transition_div img{
            width: 100%;
            height:100%;
        }
        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */

        /*普通css样式*/
        .slide-fade-enter-active {
            transition: all .3s ease;
        }
        .slide-fade-leave-active {
            transition: all .0s cubic-bezier(1.0, 0.5, 0.8, 1.0);