When attempting to apply a CSS transition as shown in the following code snippet: 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>