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

最新推荐文章于 2024-09-21 15:07:21 发布

疯子和傻子的爱情故事

最新推荐文章于 2024-09-21 15:07:21 发布

阅读量3.5k

点赞数

分类专栏： web前端 vuejs js技巧

本文链接：https://blog.csdn.net/qq_34223398/article/details/81214276

版权

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

摘要由CSDN通过智能技术生成

<!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);
        }
        .slide-fade-enter, .slide-fade-leave-to
            /* .slide-fade-leave-active for below version 2.