【问题标题】：Vue animate restartVue动画重启
【发布时间】：2021-07-20 19:28:09
【问题描述】：

我对 Vue 和动画有疑问。当新的 Vue 应用程序附加到 html 时，动画会重新启动。

例子：

setTimeout(() => {
  new Vue({
    el: "#app",
    data: {}
  });
}, 3000);

https://codepen.io/ArturAny/pen/VwPNwZM

我有一个混合应用程序，其中一些元素在 Vue 中，而其他元素在 html 中。如何修复/禁用 vue 挂载时的重启动画？

【问题讨论】：

目标#app div 中是否必须有相同的内容？通过将其移除并放置在 Vue 组件中，您只会让它动画一次
我无法移动内容。页面已经在生产中运行。大约一半的html代码是用php生成的，一半是vue组件。下次我会用完整的 SPA 来做更清晰的概念，但现在我必须解决这个问题:)。

标签： css vue.js animation

【解决方案1】：

如果无法将动画项移到 Vue 安装元素之外，解决方法是在 Vue 的 created lifecycle hook 中删除它们的动画：

setTimeout(() => {
  new Vue({
    created() {
      document.querySelector('.title').style.setProperty('animation-name', 'none')
    },
  })
}, 3000)

demo

【讨论】：

好的，但是例如设置时间 3000。如果我在没有超时的情况下安装 vue 并将动画设置为 2 秒，那么我无法清除动画，因为它可能仍在运行。

【解决方案2】：

使用模板

如果您可以在这种情况下使用组件并添加带有模板的标题，那就更好了。

HTML：

<body>
  <div id="app"></div>
</body>

JS：

setTimeout(() => {
  new Vue({
    el: "#app",
    template: "<h1 class='show'>Type Something.</h1>",
  });
}, 3000);

CSS：

@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
} 


.show {
  -webkit-animation-name: fadeUp;
  animation-name: fadeUp;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  opacity: 1;
}

使用 CSS 变量

但是如果你需要在 Vue 初始化之前渲染你的 HTML。

HTML：

<body>
  <div id="app">
      <h1 class="hidden" 
          :class="{ 'show': isMounted }">
        Type Something. 
      </h1>
  </div>
</body>

JS：

setTimeout(() => {
  new Vue({
    el: "#app",
    data: {
      isMounted: false
    },
    mounted(){
      this.isMounted = true;
    }
  });
}, 3000);

CSS：重要的是让 .show 的特异性大于 .hidden 类

@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
} 

.hidden{
  opacity: 0;
}

.show {
  -webkit-animation-name: fadeUp;
  animation-name: fadeUp;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  opacity: 1;
}

【讨论】：

就像我在评论中回答的那样：“我无法移动内容。页面已经在生产中运行。大约一半的 html 代码是用 php 生成的，一半是 vue 组件。”