vue js中div之间的转换切换答案

【问题标题】：transition toggle between divs in vue jsvue js中div之间的转换切换
【发布时间】：2019-12-10 04:50:34
【问题描述】：

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

模板

<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 之间切换。

【问题讨论】：

键可以是任何静态值。 key="map"，key="list"。没关系。或者你可以使用transition 和v-if。
如果我为元素提供不同的键，那么第二个元素不会从过渡中产生任何影响......虽然第一个元素（地图）很好......但有些东西是关闭的......@StevenB。
你用的是transition-group对吧？
一个工作的jsfiddle。
感谢您的建议和小提琴。我只是做了同样的事情，现在它正在工作。 @StevenB。

标签： vue.js vuejs2

【解决方案1】：

感谢 cmets 的建议。

我尝试为元素赋予不同的键。

    <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;
}

它现在正在工作。

【讨论】：