VueJS 导致 CSS 动画再次加载？答案

【问题标题】：VueJS is causing CSS animations to load again?VueJS 导致 CSS 动画再次加载？
【发布时间】：2020-03-03 03:34:37
【问题描述】：

我在 Laravel 中使用 VueJS，当我包含 VueJS 时，看起来页面在加载 Vue 时重新解析/重新渲染，导致我的所有 CSS 动画（在页面加载时触发）再次播放。我已经检查过该页面实际上加载了一次（通过使用 console.log() 来检查重复项并查看 HTTP 请求，每个请求都被调用一次）。

查看性能跟踪时，您可以看到它发生的时间，但我不确定原因或原因，或者从这里调试的位置。

注意背景是动画的，但标志不是；因此徽标仍然可见，但动画会重新触发。

app.js（Vue入口）

require('./bootstrap');

window.Vue = require('vue');

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('chart-line-component', require('./components/ChartLineComponent.js').default);

const app = new Vue({
    el: '#app'
});

是什么导致我的动画在包含 Vue 时重新加载？

更新：刚刚在另一个网站上尝试了相同的设置 - div 上的关键帧动画在使用 Vue 的页面加载时动画两次，而在没有 Vue 的情况下正确（一次应该）...

【问题讨论】：

请提供您的 Vue.js 代码部分（或所有代码）。您在项目中包含了 Vue 的哪个部分和哪些部分？
@Phanti 嘿！我在 Laravel 构建的默认 app.js 中包含了 Vue（6 之前的版本）。回购在这里：github.com/M-Media-Group/m-media 我已经更新了问题以添加 app.js

标签： javascript css laravel vue.js vuejs2

【解决方案1】：

您的页面可能在没有 javascript 的情况下加载并启动动画，但是当您的 javascript 加载时，Vuejs 会重新渲染 dom 的那部分。您可以将 v-cloak 添加到您的#app div。

<div id="app" v-cloak> 
...
</div>

然后您可以将此 CSS 添加到您的 CSS 文件中。

[v-cloak] { 
 display: none; 
}

通过这种方式，您的应用在加载 Vuejs 之前不会呈现。

https://vuejs.org/v2/api/#v-cloak

【讨论】：