Я использую VueJS с Laravel, и когда я включаю 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 ...