实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2
<div id="no-mode-absolute-demo" class="demo">
3
  <div class="no-mode-absolute-demo-wrapper">
4
    <transition name="no-mode-absolute-fade">
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
</div>
14
<script>
15
new Vue({
16
  el: '#no-mode-absolute-demo',
17
  data: {
18
    on: false
19
  }
20
})
21
</script>
22
<style>
23
.no-mode-absolute-demo-wrapper {
24
  position: relative;
25
  height: 18px;
26
}
27
.no-mode-absolute-demo-wrapper button {
28
  position: absolute;
29
}
30
.no-mode-absolute-fade-enter-active, .no-mode-absolute-fade-leave-active {
31
  transition: opacity .5s;
32
}
33
.no-mode-absolute-fade-enter, .no-mode-absolute-fade-leave-active {
34
  opacity: 0;
35
}
36
</style>
37
​