小编Pol*_*sek的帖子

好的，所以我是 Vue 的新手（基本上，一般来说是 JS 的新手，但我现在正在使用 Vue），我想做的是在模板标签内自动隐藏一个元素（不是点击）的一个组件。在 jQuery 中，这看起来像：

$(function() {
    setTimeout(function() {
        $(".hideElement").hide()
    }, 1000);
});

但这在 Vue 中是如何工作的？我的组件如下所示：

<template>
<div>
 <h1 class="hideElement"> HELLO </h1>
</div>
</template>

<script> // nothing here 
</script>

<style> // nothing here
</style>

我知道如何在单击按钮时切换元素，但我只想在 1 秒后自动隐藏它，每次用户进入此组件（这是一个新的“页面”）时没有任何单击事件

这是我想做的：我想在从width：0到width：100vw开始的div上播放动画，然后当它回到width 0时又回到0 BUT，并且我想从左到右进行动画处理。对，就像“连续”动画，而不是“反向”动画。就像在动画的中间一样，您可以看到div，但是当它回到宽度0时，它应该从左到右消失（就像它开始的方式一样）。我不知道如何更好地解释这一点...

div {
  position: fixed;
  z-index: 100;
  background: red;
  width: 0;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    width: 0;
  }
  50% {
    width: 100vw;
  }
  100% {
    width: 0;
    /* but starting to "disappear" from left to right, just like the way it appears */
  }
}

<div></div>