Javascript 使用v-view的VueJS转换

我希望在您更改v-view元素绑定到的组件时，为新元素的外观和旧元素的消失设置动画。但是，由于更改ViewModel实际上会破坏DOM元素，因此这似乎不起作用（框在消失时会褪色/收缩）：

var vm=new Vue({
el:“集装箱”，
数据：{
当前视图：“
}
});
Vue.组件（“红色”{
模板：“”
});
Vue.component（“蓝色”{
模板：“”
});
.red{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
.盒子{
过渡：所有3s轻松；
高度：200px；
宽度：200px；
不透明度：1；
}
.box.v-enter，
.盒子，v-离开{
身高：0；
宽度：0；
不透明度：0；
}

红色
蓝色
当“v-transition”与“v-view”一起使用时，它起作用


var vm=new Vue({
el:“集装箱”，
数据：{
当前视图：“
}
});
Vue.组件（“红色”{
模板：“”
});
Vue.component（“蓝色”{
模板：“”
});
.red{
背景色：红色；
高度：200px；
}
蓝先生{
背景颜色：蓝色；
高度：200px；
}
.盒子{
过渡：所有3s轻松；
高度：200px；
宽度：200px；
不透明度：1；
}
.box.v-enter，
.盒子，v-离开{
身高：0；
宽度：0；
不透明度：0；
}

红色
蓝色