vue.js transition css类无法放入单个文件组件

Question

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

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

我唯一能想到的是你没有界定你的风格。