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

我希望红色立方体在 mask 显示时会缩放。 但是过渡不起作用，我无法弄清楚。 有人可以帮帮我吗？

Answer 1

当元素添加到 DOM 时，转换不起作用。他们对 CSS 属性的变化使用react。

尝试改用动画。

@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;
}