【问题标题】:VSCode doesn't recognize <transition> elementVSCode 无法识别 <transition> 元素
【发布时间】: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


【解决方案1】:

只需在用户设置中添加以下行来检查。文件->首选项->设置->用户设置

“editor.formatOnSave”:真, “eslint.validate”:[ “JavaScript”, "javascriptreact", “vue” ]

【讨论】:

  • 这也极有可能解决它。
  • 为了以防万一,我将它添加到了 github 存储库中:github.com/Taikon/prac5/blob/master/prac5%20transitions.html。我还更改了用户设置。它现在可以在浏览器中使用,但由于某种原因,过渡元素在 VSCode 和 Github 中仍以红色突出显示。非常感谢您解决此问题!我不知道你怎么知道要解决什么问题。
【解决方案2】:

我相信你的标签只是一个结束标签。尝试创建&lt;head&gt;&lt;/head&gt; 打开和关闭对。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-25
    • 1970-01-01
    • 2011-12-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多