实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2
​
3
<div id="with-mode-demo" class="demo">
4
  <transition name="with-mode-fade" mode="out-in">
5
    <button v-if="on" key="on" @click="on = false">
6
      on
7
    </button>
8
    <button v-else="" key="off" @click="on = true">
9
      off
10
    </button>
11
  </transition>
12
</div>
13
<script>
14
new Vue({
15
  el: '#with-mode-demo',
16
  data: {
17
    on: false
18
  }
19
})
20
</script>
21
<style>
22
.with-mode-fade-enter-active, .with-mode-fade-leave-active {
23
  transition: opacity .5s
24
}
25
.with-mode-fade-enter, .with-mode-fade-leave-active {
26
  opacity: 0
27
}
28
</style>