我在vue中创建了一个组件，该组件包装了一个vue-apexchart甜甜圈图。页面加载和该组件加载后，vue-apexchart会设置动画并显示一个小图。 现在，我想从数据集中并排实例化这些组件中的多个。除了希望所有组件都同时加载动画外，我还希望有一个小的渲染延迟以使其整体效果不错。这样的事情会很好：
<donut :items="series1"></donut>
<donut :items="series2" delay=1500></donut>
vue-apexchart确实支持初始化延迟，据我所知，还没有任何特定于vue的官方解决方案来延迟组件的渲染。 我试图将setTimeout放在任何组件挂钩中以停止初始化， 我还尝试将所有图形DOM注入setTimeout中的v-html标记上的template元素中，但是apexchart确实注意到了这个新的dom内容，而vue确实注意到了html绑定。
我创建了这个小提琴，它加载了图的两个实例： https://jsfiddle.net/4f2zkq5c/7/
有什么创意建议吗？
答案 0 :(得分：1)
您可以通过几种方法来执行此操作，这取决于您是否可以实际修改<animated-component>逻辑：
<transition-group>处理列表呈现 VueJS附带了非常方便的过渡支持，可用于顺序显示<animated-component>。您将需要使用自定义动画库（例如VelocityJS）并将延迟存储在元素的数据集中，例如v-bind:data-delay="500"。 VueJS docs has a very good example on how to introduce staggered transitions for <transition-group>，下面的示例在很大程度上适用于此。
然后，您使用beforeAppear and appear hooks来设置<transition-group>的各个子项的不透明度。
Vue.component('animated-component', {
template: '#animatedComponentTemplate',
props: {
data: {
required: true
}
}
});
new Vue({
el: '#app',
data: {
dataset: {
first: 'Hello world',
second: 'Foo bar',
third: 'Lorem ipsum'
}
},
methods: {
beforeAppear: function(el) {
el.style.opacity = 0;
},
appear: function(el, done) {
var delay = +el.dataset.delay;
setTimeout(function() {
Velocity(
el, {
opacity: 1
}, {
complete: done
}
)
}, delay)
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition-group name="fade" v-on:before-appear="beforeAppear" v-on:appear="appear">
<animated-component v-bind:data="dataset.first" v-bind:key="0"> </animated-component>
<animated-component v-bind:data="dataset.second" v-bind:key="1" v-bind:data-delay="500"> </animated-component>
<animated-component v-bind:data="dataset.third" v-bind:key="2" v-bind:data-delay="1000"> </animated-component>
</transition-group>
</div>
<script type="text/x-template" id="animatedComponentTemplate">
<div>
<h1>Animated Component</h1>
{{ data }}
</div>
</script>
<animated-component>处理自己的渲染在此示例中，您只需将数字传递给delay属性（请记住使用v-bind:delay="<number>"，以便您传递数字而不是字符串）。然后，在<animated-component>的已安装生命周期挂钩中，使用计时器来切换组件本身的可见性。
有关如何显示最初隐藏的组件的技术取决于您，但是在这里，我仅应用0的初始不透明度，然后在setTimeout之后进行过渡。
Vue.component('animated-component', {
template: '#animatedComponentTemplate',
props: {
data: {
required: true
},
delay: {
type: Number,
default: 0
}
},
data: function() {
return {
isVisible: false
};
},
computed: {
styleObject: function() {
return {
opacity: this.isVisible ? 1 : 0
};
}
},
mounted: function() {
var that = this;
window.setTimeout(function() {
that.isVisible = true;
}, that.delay);
}
});
new Vue({
el: '#app',
data: {
dataset: {
first: 'Hello world',
second: 'Foo bar',
third: 'Lorem ipsum'
}
}
});.animated-component {
transition: opacity 0.25s ease-in-out;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<animated-component v-bind:data="dataset.first"> </animated-component>
<animated-component v-bind:data="dataset.second" v-bind:delay="500"> </animated-component>
<animated-component v-bind:data="dataset.third" v-bind:delay="1000"> </animated-component>
</div>
<script type="text/x-template" id="animatedComponentTemplate">
<div class="animated-component" v-bind:style="styleObject">
<h1>Animated Component, delay: {{ delay }}</h1>
{{ data }}
</div>
</script>
答案 1 :(得分：1)
如果可以重新格式化数据，则可以构建一系列对象，添加一个show: true/false属性并对其进行迭代：
//template
<div v-for="serie in series">
<donut :items="serie.data" v-if="serie.show"></donut>
</div>
//script
data: function() {
return {
series: [
{ data: [44, 55, 41, 17, 15], show: false },
{ data: [10, 20, 30], show: false },
]
}
}
现在，您可以创建一个setTimeout函数，该函数将通过基于序列索引增加延迟来将serie.show更改为true。
然后将功能添加到已挂接的钩子上：
methods: {
delayedShow (serie, idx) {
let delay = 1500 * idx
setTimeout(() => {
serie.show = true
}, delay)
}
},
mounted () {
this.series.forEach((serie, idx) => {
this.delayedShow(serie, idx)
})
}