Initial CSS transition won't play - html

Question

I've got transition(expand/NotExpand) on the grid cells of my CSS grid which is triggered onClick.
PROBLEM:
The problem is on the initial click, the expansion/transition won't play and the element would simply snap in to place. Of course this also has a reverse transition but since it's the second click of that child cell/element, the transition would play.
~Parent grid~
<template>
<div class="jobGrid myr" id="jobGrid">
<job-cell v-for="job in jobs" :key="job.id" :job="job" />
</div>
</template>
<style scoped>
.jobGrid {
display: grid;
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% ;
grid-template-rows: 25% 25% 25% 25% ;
grid-column-gap: 5%;
grid-row-gap: 3%;
margin: auto;
margin-top: 2%;
width: 90%;
height: 90%;
max-width: 90%;
max-height: 90%;
overflow-x: auto;
}
</style>
~Child cell~
<template>
<div class="scene" #click="toggleJobData($event)" :style="expandCSS" >
<div>
{{job.title}}
</div>
</div>
</template>
<style>
.scene {
background: peru;
transition: left 3s, top 3s, width 3s, height 3s;
}
</style>
<script>
export default {
props: ['job'],
data() {
return {
expand: false,
expandCSS: {zIndex: 1},
}
},
computed: {
gridCSS() {
return this.$store.state.job.jobSelectorCSS
}
},
methods: {
toggleJobData(e) {
let currentPos = e.target.getBoundingClientRect()
let expand = {
position: 'relative',
left: `${this.gridCSS.left - currentPos.left}px`,
top: `${this.gridCSS.top - currentPos.top}px`,
width: `1041%`,
height: `400%`,
//zIndex: 2,
}
let notExpand = {
position: 'relative',
left: '0px',
top: '0px',
width: '100%',
height: '100%',
//zIndex: 1,
}
if(!this.expand) {
this.expand = !this.expand
this.expandCSS = expand
}else{
this.expand = !this.expand
this.expandCSS = notExpand
}
}
}
}
</script>
*** This is what you will get onLoad, or the NotExpand state.
Here, I clicked "Job2" and it will expand beyond its cell to fill up the entire grid.
I assume that the transition is applied immediately after onLoad

Answer 1

I think the "missing transition" is lack of CSS properties for its initial state. Until the first click, there are no properties to transite from.
Try styling your child cell with the initial props, that would be transited, like this:
.scene {
background: peru;
transition: all 3s;
position: relative;
left: 0px; top: 0px;
width: 100%; height: 100%;
}