為什么CSS過渡在新的dom中不起作用？

Question

當我使用CSS過渡時，如下所示。 https://jsfiddle.net/sunyuu/e58sfeva/17/

 var Main = { data () { return { isActive: false, childStyle: {} }; }, methods: { showMask() { this.isActive = true this.$nextTick(() => { this.childStyle = { transform: 'scale(2, 2)' } }) }, hideMask() { this.childStyle = {} this.isActive = false } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app') 

 .parent { position: fixed; width: 100%; height: 100%; top: 0; background-color: rgba(0, 0, 0, 0.6); } .child { width: 100px; height: 150px; background-color: red; transition: transform .3s ease-in-out; } 

 <script src="//unpkg.com/vue/dist/vue.js"></script> <div id="app"> <template> <button @click="showMask">click here</button> <div class="parent" v-if="isActive" @click="hideMask"> <div v-bind:style="childStyle" class="child"></div> </div> </template> </div> 

我希望在蒙版顯示時紅色立方體會縮放。 但是過渡是行不通的，我無法弄清楚。 有人可以幫我嗎？

Answer 1

將元素添加到DOM時，過渡無效。 他們正在對CSS屬性的變化做出反應。

嘗試改用動畫。

 @keyframes childScale { from {transform: scale(0, 0)} to {transform: scale(2, 2)} } .child { width: 100px; height: 150px; background-color: red; animation: childScale .3s ease-in-out; } 

Answer 2

為了使CSS轉換有效，該dom必須可用，且不設置display:none ，並且應具有其轉換前的初始狀態值。