【发布时间】:2018-08-23 06:06:52
【问题描述】:
出于某种原因,我的 VSCode 以红色突出显示了过渡元素,我认为这意味着它无法识别该元素。我不太确定这里发生了什么。而且代码也不起作用,因为单击按钮根本没有转换甚至任何更改。感谢您的帮助!
<!--Vuejs CDN--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <title>Hello, world!</title> </head> <body> <div id='app'> <button v-on:click='showThis = !showThis'>Swap</button> <transition name='fade'> <p v-if='showThis'>Then showThis is true!</p> </transition> </div> <!-- Vuejs --> <script> new Vue({ el:'#app', data:{ showThis:true } }) </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="匿名">
【问题讨论】:
-
请注意,我有一个名为 index.html 的文件,上面和下面都有一些代码。 body 元素在上面的代码中也发生了变化,但它就在那里。
-
为了以防万一,我将它添加到了 github 存储库:github.com/Taikon/prac5/blob/master/prac5%20transitions.html。我还根据 Debadatta 更改了用户设置。它现在可以在浏览器中使用,但由于某种原因,过渡元素在 VSCode 和 Github 中仍以红色突出显示。
标签: javascript html vue.js transition