vue.js transition css class cannot put into single file component

I made a component using transition as follows.

This is taken from official documentation except that it is a single file component. This component's <style> is not working, but if I put these css in a external css file, transition works.

Is this expected behavior? Am I have to write vue's transition css into external file even when using single file component?

<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>