vue.js 过渡 css 类不能放入​​单个文件组件中

Posted 2023-03-06

【中文标题】vue.js 过渡 css 类不能放入​​单个文件组件中

【英文标题】：vue.js transition css class cannot put into single file component

【发布时间】：2018-05-08 14:39:36

【问题描述】：

我使用过渡制作了一个组件，如下所示。

这取自official documentation，只是它是一个单一的文件组件。 该组件的<style> 不起作用，但如果我将这些 css 放在外部 css 文件中，则转换可以工作。

这是预期的行为吗？ 即使使用单个文件组件，我是否必须将 vue 的转换 css 写入外部文件？

<template>    
  <div id="demo">
     <button v-on:click="show = !show">
       Toggle
     </button>
     <transition name="fade">
       <p v-if="show">hello</p>
     </transition>
  </div>
</template>
<script>
  module.exports = 
   el: '#demo',
   data: 
     show: true
   
  )
</script>
<style>
  .fade-enter-active, .fade-leave-active 
    transition: opacity .5s
  
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ 
   opacity: 0
  
</style>

【参考方案1】：

我能想到的唯一一件事是你没有确定你的风格。