fix: 执行全部元素动画预览

This commit is contained in:
pipipi-pikachu 2023-12-05 21:12:21 +08:00
parent 61b1752e38
commit d955509972

View File

@ -107,9 +107,13 @@
</div> </div>
</template> </template>
</Draggable> </Draggable>
<Button class="animation-preview" @click="runAllAnimation" v-if="animationSequence.length >= 2">
<IconPlayOne style="margin-right:5px" />{{ animateIn ? '停止' : '预览'}} <template v-if="animationSequence.length >= 2">
</Button> <Divider />
<Button @click="runAllAnimation()">
{{ animateIn ? '停止预览' : '预览全部'}}
</Button>
</template>
</div> </div>
</template> </template>
@ -250,6 +254,7 @@ const runAnimation = (elId: string, effect: string, duration: number) => {
elRef.addEventListener('animationend', handleAnimationEnd, { once: true }) elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
} }
} }
// //
const runAllAnimation = async () => { const runAllAnimation = async () => {
animateIn.value = !animateIn.value animateIn.value = !animateIn.value
@ -258,7 +263,7 @@ const runAllAnimation = async () => {
const item = animationSequence.value[i] const item = animationSequence.value[i]
if (item.index !== 1 && item.trigger !== 'meantime') await new Promise(resolve => setTimeout(resolve, item.duration + 100)) if (item.index !== 1 && item.trigger !== 'meantime') await new Promise(resolve => setTimeout(resolve, item.duration + 100))
runAnimation(item.elId, item.effect, item.duration) runAnimation(item.elId, item.effect, item.duration)
if (i === animationSequence.value.length - 1) animateIn.value = false if (i >= animationSequence.value.length - 1) animateIn.value = false
} }
} }