漸變效果的順序: transition mode

再執行新元素進場的動畫 (out-in), #Vue3 #VueJS3

by ChrisWong

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">

  <div class="mode">
    <label>
      <input v-model="demo" type="radio" value="A"> Block A
    </label>
    <label>
      <input v-model="demo" type="radio" value="B"> Block B
    </label>
    <label>
      <input v-model="demo" type="radio" value="C"> Block C
    </label>
  </div>

  <transition name="fade" mode="out-in">
    <div v-if="demo === 'A'" key="block-a" class="block">A Block</div>
    <div v-else-if="demo === 'B'" key="block-b" class="block">B Block</div>
    <div v-else-if="demo === 'C'" key="block-c" class="block">C Block</div>
  </transition>
</div>

SCSS

#app {
  position: relative;
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

button {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.block {
  display: block;
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: #0f0;
}

.mode {
  margin-bottom: 1rem;
  label { margin-right: 1rem; }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
	    demo: 'A',
      isShow: true
    }
  }
});

app.mount('#app');