Question

我正在尝试在div之间应用切换。但是我做不到。我知道我不能在过渡中放入两个元素。为此，我需要transition-group。但是当我使用group时，它会说bind group内部的元素。但是我没有循环这些元素...所以我对解决这个问题有些困惑...

模板

<div>
    <transition name="view">
        <map-view 
            v-show="this.screenView == 'map'" 
            :changeView="changeView" />    
        <list-view 
            v-show="this.screenView === 'list'"
            :changeView="changeView" />               
    </transition>            
</div>

脚本

methods: {
    changeView(screen){
        this.screenView = screen;
    }
}

样式

.view-enter-active, .view-leave-active {
  transition: opacity .5s
}
.view-enter, .view-leave-to {
  opacity: 0
}

通过changeView()工作。那部分没问题。只是尝试在div之间切换。

Answer 1

感谢评论中的建议。

我尝试为元素提供不同的键。

    <transition-group name="view">
        <map-view 
            key="maps"
            v-show="this.screenView == 'map'" 
            :changeView="changeView" />    
        <list-view 
            key="list"
            v-show="this.screenView === 'list'"
            :changeView="changeView" />               
    </transition-group>

并更改了如下样式。

.view-enter-active, .view-leave-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}
.view-enter-active {
    transition-delay: 0.5s;
}

.view-enter, .view-leave-to {
  opacity: 0;
}

.view-enter-to, .view-leave {
  opacity: 1;
}

现在正在工作。

vue js中的div之间的过渡切换

1 个答案: