和没加<transition>一样，没有过度

源自：Vue基础详解 2-20 过渡效果

收起

2回答

好帮手慕夭夭 2019-09-18 17:11:47

你好同学，老师使用的你代码测试，是有过渡效果的，如下渐渐的淡化：

看你的截图中，控制台有报错，是不是项目中其他地方报错影响的，可以看一下控制台，根据报错提示修改一下。如果有不会的，建议重新创建一个问题提问，以便得到更及时的回复。

或者你重新创建一个项目，把这段代码粘贴到新的项目中测试哦。

祝学习愉快，望采纳。

好帮手慕夭夭 2019-09-18 16:12:02

你好同学，请把代码粘贴到问答区域，以便老师准确高效的为你查看问题。

祝学习愉快！

提问者 Z_xc #1

<template> <div> <div> <button @click='show=!show'> anniu </button> <transition name="fade"> <p v-if='show'>显示</p> </transition> </div> <router-link to="/demo1">demo1</router-link> </div> </template> <script> export default{ data(){ return{ show:true } } } </script> <style> .fade-leave-active,.fade-enter-active{ transition:opacity .5s } .fade-leave-to,.fade-enter{ opacity: 0 } </style>

2019-09-18 16:31:19