为什么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>

I expect the red cube would scale when the mask show. But the transition doesn't work, I can't figure it out. Can somebody help me?

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，并且应具有其初始的转换前状态值。