在第一次加载和鼠标上动画 rect 高度 hover/out

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.

之间切换

Here代码：

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

在第一次加载和鼠标上动画 rect 高度 hover/out

Animate rect height on first load and on mouse hover/out

javascript

css

css-transitions

vue.js