我google了很多，但没有发现任何关于此。如何在渲染Vue组件时触发事件？
我想在Vue渲染时淡入我的内容。我的应用程序很大，需要一段时间才能为用户做好准备。但是，当Vue将内容插入块时，CSS动画不想工作。请参阅下面列出的代码JSFiddle。
HTML
Weeverfish round whitefish bass tarpon lighthousefish mullet tigerperch bangus knifefish coley Black sea bass tompot blenny madtom tapetail yellow-eye mullet..
CSS
#my-app {
opacity: 0;
transition: 2s;
}
#my-app.visible {
opacity: 1;
transition: 2s;
}
的JavaScript
// Fade in animation will work if you comment this ...
Vue.component('example', {
template: `
Starry flounder loach catfish burma danio, three-toothed puffer hake skilfish spookfish New Zealand sand diver. Smooth dogfish longnose dace herring smelt goldfish zebra bullhead shark pipefish cow shark.
`});
// ... and this
const app = new Vue({
el: '#my-app',
// Makes content visible, but don't provides fade-in animation
/*
created: function() {
$('#my-app').addClass('visible')
}
*/
});
// Makes content visible, but don't provides fade-in animation
// with enabled Vue
$('#my-app').addClass('visible');
// As you can see, animation with Vue works only here
setInterval(() => {
$('#my-app').toggleClass('visible');
}, 5000);
而且我也没有发现任何内置Vue解决方案(事件，方法等)在渲染Vue时运行代码。像load & DOMContentLoaded这样的事件也没有帮助。 created也没有提供预期的结果：
const app = new Vue({
el: '#my-app',
// Makes content visible, but don't provides fade-in animation
created: function() {
$('#my-app').addClass('visible')
}
});
有谁知道我的问题很好的解决方案？
谢谢。
2016-11-15
terron
+0
您使用的是哪个版本的Vue？可以在VueJS 2中以编程方式处理转换，并且您希望使用挂载的钩子而不是'created'钩子，因为到那时它将被应用到DOM。 –
+0
@DavidL，似乎将'created'更改为'mounted'没有帮助。我正在使用Vue的最新版本。好的，谢谢，我现在尝试使用转换。 –
+0
如果可能的话，我肯定会推荐vue通过钩子的外部解决方案进行转换。 –