Vue.js实现矩形首次加载动画及hover交互的问题修复

问题根因 #

• 你注释了.rect的默认height: 100%配置，当2秒后isFirstLoad变为false、height-100类被移除后，矩形没有匹配的高度规则，自然显示为0高度
• 类名绑定逻辑不符合需求：你需要的是初始高度为0、动画结束后恢复为默认100%，当前逻辑刚好相反

修复代码 #

<template>
  <div id="app">
    <div class="rect" :class="{ 'height-0': isFirstLoad }" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isFirstLoad: true,
    };
  },
  mounted() {
    // 等DOM初始渲染完成后移除height-0类，触发从0到100%的过渡动画
    setTimeout(() => {
      this.isFirstLoad = false;
    }, 0);
  },
};
</script>

<style lang="scss">
#app {
  border: 2px solid black;
  width: 200px;
  height: 300px;
}
#app:hover .rect {
  background-color: tomato;
  height: 0%;
  // hover交互的过渡时间设为1s，和首次加载动画区分
  transition: all 1s ease;
}
.rect {
  background-color: tomato;
  width: 100%;
  height: 100%;
  // 首次加载动画过渡时间设为2s
  transition: all 2s ease;
  &.height-0 {
    height: 0%;
  }
}
</style>

内容的提问来源于stack exchange，提问作者marielle