问一个vue过渡的问题,多个div之间切换不知道怎么才能自然

错觉 发布于 2016/05/04 23:45
阅读 3K+
收藏 0

@EvanYou 你好,想跟你请教个问题:

我这个小功能很简单,过渡用的Animate.css
需求就是: 页面有几道题让人回答, 每次只能回答一道题, 点击下一题再回答下一题,所有题目我都写一个html中了,除当前题目之外其他题目的v-show是false,  代码如下:
<!-- html部分 -->

<div class="row animated" v-show="steps[0]" transition="fade">
//第一题内容
//下一题按钮,click后当前题目v-show变为false,下一题变为true
</div>
<div class="row animated" v-show="steps[1]" transition="fade">
//第二题内容
//上一题按钮
//下一题按钮
</div>




<!-- js部分 -->

//注册一个过渡
Vue.transition('fade', {
    enterClass: 'fadeInLeft',
    leaveClass: 'fadeOutRight'
});
var vm = new Vue({
    el: '#ask',
    data: {
        steps: [//所有题目是否显示,默认第一题显示
            true,false,false,false,false
        ],
///////////.....其他代码



目前点击"下一题"的效果是:
第一题fadeOut和第二题的fadeIn同时发生了,  现象就是这两题在页面上同时出现了1秒,然后第一题fadeOut后,div位置是空的, 第二题fadeIn后挪了上去, 不知道大家能不能理解.
这个需求我不用过渡一点问题没有,就是想加点效果, vue-router又不太会用,写不了spa, 有没有朋友能帮忙梳理下,是我用法不对吗

加载中
0
错觉
错觉

解决了,哈哈,我不要过渡离开的效果不就ok了,直接hide

Vue.transition('fade', {
    enterClass:'fadeInLeft',

    leaveClass:'hide'

});

0
画面
画面
EvanYou 不上开源中国
画面
画面
回复 @错觉 : http://forum.vuejs.org/category/10/%E4%B8%AD%E6%96%87 这是官方论坛 你还可以加一些群
错觉
错觉
那他上哪
返回顶部
顶部