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

向右看齐 2022-05-19 13:55 304阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>切换测试</title>
        <link rel="stylesheet" href="./vue/lib/css/animate.min.css">
        
        <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/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.1.8 */ {
                transform: translateX(100px);
                /*opacity: 0;*/
            }
    
    
            /*动画css样式*/
            .bounce-enter-active {
                animation: bounce-in 2s;
            }
            .bounce-leave-active {
                animation: bounce-in .0s reverse;
            }
            @keyframes bounce-in {
                0% {
                    transform: scale(0);
                }
                50% {
                    transform: scale(1.5);
                }
                100% {
                    transform: scale(1);
                }
            }
        </style>
    </head>
    <body>
    <div id="app">
    
        <div style="height: 500px;overflow: hidden">
            <div v-for="(item,index) in option.data">
                <transition name="custom" :enter-active-class="'animated '+animateClass">
                    <div class="transition_div"  v-show="index==textIndex">
                        <img :src="item.url" />
                        
                    </div>
                </transition>
            </div>
        </div>
    
        <div>
            <select  v-model="animateClass">
                <option :value="item1.value" v-for="item1 in animateJson">{
       {item1.name}}</option>
            </select>
            <button @click="toggleLeft">左</button>
            <button @click="toggleRight">右</button>
        </div>
    </div>
    
    </body>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                animateClass:"fadeIn",
                num:3,
                textIndex:0,
                param:{},
                option : {
                    url: "",
                    data: [
                        {
                            name:"1",
                            url:"./img/1.jpg"
    
                        },
                        {
                            name:"2",
                            url:"./img/2.jpg"
    
                        },
                        {
                            name:"3",
                            url:"./img/3.jpg"
    
                        },{
                            name:"4",
                            url:"./img/4.jpg"
    
                        },{
                            name:"5",
                            url:"./img/5.jpg"
    
                        }
                    ],
                    duration:  1, // 动画速度
                    timeSpace:  3, //播放间隔
                    typeNumber: 1,
                    //timeSpace: 4,
                    pageNumber:  1,
                    templateClass: "I_list_Ul clear2",
                    itemSpaceLR:  0, //item 左右间距speed
                    itemSpaceTB: 0, //item 上下间距，
                    showTitle: '1', // 是否显示标题
                    showUnit:  '0', // 是否显示单位
                    showAuthor:  '0', // 是否显示作，
                    showDuration:  '0', // 是否显示时长
                    showCreateTime:  '0', // 是否显示创建时间
                    isAutoPlay:  '0', // 是否自动播放
                    imgScale: '4/3',
                    isAutoDuration:true,
                    isOrNotButton:true
                },
                data:[
                    {
                        name:"1",
                        url:"./img/1.jpg"
    
                    },
                    {
                        name:"2",
                        url:"./img/2.jpg"
    
                    },
                    {
                        name:"3",
                        url:"./img/3.jpg"
    
                    },{
                        name:"4",
                        url:"./img/4.jpg"
    
                    },{
                        name:"5",
                        url:"./img/5.jpg"
    
                    }
                ],
                animateJson:[
      {
        "name":"反弹",
        "value":"bounce"
      },
      {
        "name":"闪光",
        "value":"flash"
      },
      {
        "name":"淡入",
        "value":"fadeIn"
      },
      {
        "name":"脉动",
        "value":"pulse"
      },
      {
        "name":"橡皮筋",
        "value":"rubberBand"
      },
      {
        "name":"左右轻晃",
        "value":"shake"
      },
      {
        "name":"摆动",
        "value":"swing"
      },
      {
        "name":"塔达晃动",
        "value":"tada"
      },
      {
        "name":"中央轻抖",
        "value":"bounceIn"
      },
      {
        "name":"向下淡入",
        "value":"fadeInDown"
      },
      {
        "name":"左淡入",
        "value":"fadeInLeft"
      },
     {
        "name":"右淡入",
        "value":"fadeInRight"
      },
      {
        "name":"向上淡入",
        "value":"fadeInUp"
      },
      {
        "name":"淡出",
        "value":"fadeOut"
      },
      {
        "name":"中心水平反转",
        "value":"flipInX"
      },
      {
        "name":"中心竖直反转",
        "value":"flipInY"
      },
      {
        "name":"光速出现",
        "value":"lightSpeedIn"
      },
      {
        "name":"中心180度旋转渐显",
        "value":"rotateIn"
      },
      {
        "name":"左下角中心向下点转",
        "value":"rotateInDownLeft"
      },
     {
        "name":"右下角中心向下点转",
        "value":"rotateInDownRight"
      },
     {
        "name":"左侧旋转进入",
        "value":"rollIn"
      },
      {
        "name":"中央运动渐显",
        "value":"zoomIn"
      },
     {
        "name":"向下滑入",
        "value":"slideInDown"
      },
     {
        "name":"向上滑入",
        "value":"slideInUp"
      }
    ]
            },
            methods:{
                toggleRight(){
                    if((this.textIndex+1)==this.option.data.length){
                        this.textIndex=0;
                    }else{
                        this.textIndex++;
                    }
                },
                toggleLeft(){
                    if((this.textIndex-1)<0){
                        this.textIndex=this.option.data.length-1;
                    }else{
                        this.textIndex--;
                    }
                }
            }
        });
    </script>
    </html>

该方法可以配合animate.css实现多种轮播效果，但是在切换隐藏消失的地方会有小的闪烁，则必须设置的容器的高度为图片的高度。---------------------且不能实现简单的滑动，实用性不大