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

Question

我使用转换创建了一个组件如下。

这取自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>

Answer 1

我能想到的唯一一件事就是您没有确定自己的风格。