用 vue 实现的动画，为什么却不按照预期来运行（已经添加了.fade-leave 类，但貌似不生效）

运行效果也可在这查看： https://jsbin.com/leyeyureki/edit?html,css,js,output

  对这段代码的预期是:
    (1)在未触发动画前，.box 的 opacity 的初始值是 0.3 ；
    (2)在点击切换按钮时(使 show 变为 false)，离开过渡动画被触发,css 中 opacity 的
       值先变成 1，然后经过 3s 后，opacity 的值变成 0。

  问题在于：当点击切换按钮时，貌似.fade-leave 这个类并没有生效。
           我不是已经在 css 中添加了.fade-leave 这个类了吗？
           但为什么点击切换时，它并没有将 opacity 的值首先变成 1.
           .fade-leave 这个类不是在离开过渡被触发时会立刻生效吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <input type="button" value="切换"  v-on:click="handleClick">
    
    <transition name="fade">
      <div class="box" v-if="show">hello world</div>
    </transition>
  </div>

</body>
</html>

.box {
  /* .box 的初始值 */
  opacity: 0.3;
}

/* 
  对这段代码的预期是:
    (1)在未触发动画前，.box 的 opacity 的初始值是 0.3 ；
    (2)在点击切换按钮时(使 show 变为 false)，离开过渡动画被触发,css 中 opacity 的
       值先变成 1，然后经过 3s 后，opacity 的值变成 0。

  问题在于：当点击切换按钮时，貌似.fade-leave 这个类并没有生效。
           我不是已经在 css 中添加了.fade-leave 这个类了吗？
           但为什么点击切换时，它并没有将 opacity 的值首先变成 1.
           .fade-leave 这个类不是在离开过渡被触发时会立刻生效吗？

*/

.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  transition: opacity 3s;
}

.fade-leave-to {
  opacity: 0;
}

var vm = new Vue({
  el: "#app",
  data: {
    show: true
  },
  methods: {
    handleClick: function() {
      this.show = !this.show;
    }
  }
})