html - 初始 CSS 过渡不会播放

Question

我的 CSS 网格的网格单元格上有transition（expand/NotExpand ），触发onClick。

问题：

问题出在第一次点击时，扩展/过渡不会播放，元素只会卡入到位。当然，这也有一个反向过渡，但由于它是该子单元格/元素的第二次单击，因此会播放过渡。

~父网格~

<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>

~儿童牢房~

<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>

*** 这就是您将获得的 onLoad 或 NotExpand 状态。

在这里，我单击了“Job2”，它将扩展到其单元格之外以填满整个网格。

我假设在 onLoad 之后立即应用转换

Answer 1

我认为“缺失的过渡”是其初始状态缺少 CSS 属性。在第一次单击之前，没有要转换的属性。

尝试使用初始道具为您的子单元格设置样式，这些道具将被转换，如下所示：

.scene {
  background: peru;
  transition: all 3s;
  position: relative;
  left: 0px; top: 0px;
  width: 100%; height: 100%;
}