在第一次加载和鼠标悬停/移出时制作矩形高度动画

Question

这是我第一次使用Vue.js，我需要在组件第一次加载时做一个非常简单的动画。

这是我的出发点：

<template>
<div id="app">
<div class="rect" />
</div>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style lang="scss">
#app {
border: 2px solid black;
width: 200px;
height: 300px;
}
#app:hover {
.rect {
background-color: tomato;
height: 0%;
}
}
.rect {
transition: all 1s ease;
background-color: tomato;
width: 100%;
height: 100%;
}
</style>

现在，我希望在第一次加载时，红色矩形的高度在2秒内从0%变为100%，然后它应该像现在一样，所以鼠标悬停时高度变为0，鼠标悬停时为100%。为此，我创建了一个isFirstLoad变量，并在两个新类height-0和height-100之间切换。

这里的代码：

<template>
<div id="app">
<div class="rect" :class="{ 'height-100': isFirstLoad }" />
</div>
</template>
<script>
export default {
name: "App",
components: {},
data: function () {
return {
isFirstLoad: true,
};
},
mounted() {
setTimeout(() => {
this.isFirstLoad = false;
}, 2000);
},
};
</script>
<style lang="scss">
#app {
border: 2px solid black;
width: 200px;
height: 300px;
.height-0 {
height: 0%;
}
.height-100 {
height: 100%;
}
}
#app:hover {
.rect {
background-color: tomato;
height: 0%;
}
}
.rect {
transition: all 1s ease;
background-color: tomato;
width: 100%;
// height: 100%;
}
</style>

它在第一次加载时工作，但之后，矩形高度始终为0%。我想是因为我总是设置height-0。我该如何修复？

Answer 1

尝试如下片段：

new Vue({
el: '#app',
data() {
return {
isFirstLoad: true,
}
},
methods: {
setHeight(toggle) {
this.isFirstLoad = toggle;
}
},
mounted() {
setTimeout(() => {
this.isFirstLoad = false;
}, 2000);
}
})
Vue.config.productionTip = false
Vue.config.devtools = false

#app {
border: 2px solid black;
width: 200px;
height: 300px;
}
#app .height-0 {
height: 0%;
}
#app .height-100 {
height: 100%;
}
#app:hover .rect {
background-color: tomato;
}
.rect {
transition: all 1s ease;
background-color: tomato;
width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"
@mouseover="setHeight(true)"
@mouseleave="setHeight(false)">
<div class="rect" :class="isFirstLoad ? 'height-100' : 'height-0'">
</div>
</div>