vue for循环出div 给每个div的过渡动画方式 然后通过判断给不同的动画方式

Question

问题描述

vue for循环出div 给每个div的过渡动画方式 然后通过判断给不同的动画方式
判断类型 是循环数对象的一个属性

问题出现的环境背景及自己尝试过哪些方法

通过后台获取到数据对象，循环遍历出DIV
对象中的一个属性定义了动画的方式，例如 type=“1”,

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

这是循环的代码

 <div v-for="pageData in pageData" >
                <transition 
                    v-on:before-enter="beforeEnter"
                    v-on:enter="enter"
                    v-on:leave="leave"
                    v-bind:css="false"
                >   
                    <page :key='pageData._Id' v-if="flag" :pageData="pageData" :subPageData="subPageData" :resObject="resObject"></page>
                </transition>   
            </div>

子组件代码

 <div class="page" v-bind:style="{
                            width:'100%',
                            height:'0px',
                            paddingBottom:data._PercentHeight,
                            backgroundColor:data._BackgroundColor,
                            backgroundImage:'url(/static/images/'+data._BackgroundImg+')',
                        } "
                        v-if="data._Id == showPageId" key="data._Id">
                            <div>xxxxxxxxxxx</div>
                        </div>

这是动画的代码

methods:{
    // 页面切换动画
         beforeEnter: function (el) {
              //页面显示动画即将执行
               el.style.opacity = 0
        },
        enter: function (el, done) {
            //'页面显示动画执行中...'
          Velocity(el, { opacity: 1})
          Velocity(el, { complete: done })
        },
        leave: function (el, done) {
            //页面隐藏动画执行中
          Velocity(el, {
            opacity: 0
          }, { complete: done })
        },
    }

你期待的结果是什么？实际看到的错误信息又是什么？

我怎么能够通过判断pageData.type的值的判断，遍历的div给予不同的动画方式

Answer 1

用animate.js，然后区分数据，通过加不同类名的方式，改变不同的进入方式

<transition enter-active-class="slideInLeft" leave-active-class="slideOutUp">
    <div v-if = "isShow" class="box animated"></div>
</transition>

引入animate的js和css，然后通过数据加类名，可以对数据加个过滤器，动画时间的话，可以改css里的。