transition问题-续
1、关于search和home等4个页面一样，都是根组件。
（我的理解是都是一级路由，而product才是二级路由）
也就是说从home根组件到了search根组件或是search根组件到了home根组件，应该是都有效果，为啥进入search的时候没有动画效果
2、为什么if渲染的结构需要发生变化才实现动画效果
3、product与search没有效果的原因和处理方法一样吗
4、关于老师说的第三种情况，动态组件的过渡，能否举个小例子帮助理解
https://class.imooc.com/course/qadetail/214162
正在回答
同学你好，问题解答如下:
1、"同学的进入search的时候，没有就是因为因为进入的时候，离开了跟组件，没有动画效果。但是移出的时候就回到根节点了，符合第四个情况，所以有动画效果" 描述的确实不太好。
2.根组件和组件根节点不是一回事。一个项目有很多组件，那么这么多组件，它们会有一个根组件，即app.vue。而组件根节点意思是一个组件的根元素。例如如下组件中，nav就是这个组件的根节点。
3. 在搜索组件和商品详情组件中，动画transition是作为一个组件根节点出现的。符合组件根节点的情况，就可以设置动画。
但为何此时点击进入时没有动画，点击离开时就有动画？老师换一个方式给你通俗的解释一下：
这是因为去执行动画时，要根据<transition name="search">先去识别这个动画，也就是说看到了有这个动画才会执行。<transition name="search">是写在search组件中的。 在点击进入时，此时search组件是没有添加到页面，所以没有识别到就看不到动画效果了。
移出的动画是怎么实现的？这是因为离开之前组件已经添加在页面中了，点击离开时，已经识别到有这个动画了，所以离开时的动画是可以看到的。当彻底离开之后，组件就会销毁，缓存中就没有了。所以下一次点击进入，还是不会有动画。
而这里就是结合<keep-alive>去让组件缓存下来，这样才会有动画。原理不需要深究，这都是vue封装好的，当前固定记住这种方式需要结合<keep-alive>实现效果就行哦。
4.对，v-if是实现进入时的动画。因为刚进入search组件时，是没有效果的。所以在刚进入时用v-if先把search组件隐藏起来了，然后再改变v-if绑定的值让它显示。也就是说，组件添加进来之后，使用v-if做了一次隐藏然后再显示的效果，此时的效果就有动画了。
而离开时的动画实现，在上面已经说过了，组件已经在页面中，能够识别到动画了。
祝学习愉快~
同学你好，问题解答如下：
1.一个项目只有一个根组件。这个案例中，App.vue是根组件，所以同学的说法search根组件，home根组件等是不对的 ，search和home是根组件中使用路由添加进来的内容。
2.之前老师说的4种情况下，是vue官方规定的，固定记住就行。
3. 对，一样的。不过课程中搜索框使用了另一个解决方式，可以参考一下：
<keep-alive>作用是把组件缓存下来。如果不缓存下来，点击搜索需要加载这个组件，看不到动画效果了。缓存中有这个组件之后，就不需要重新渲染，所以能看到动画效果。
4.动态组件会涉及到同学没有学过的知识。同学现在基础还比较薄弱，不建议扩展课外内容。先把课程中的学会，等你以后基础打好了，再去学习其他内容哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星