fix: 动画序列第一项为非主动触发时异常、撤回未播放的页面时异常

This commit is contained in:
pipipi-pikachu 2022-05-13 23:03:11 +08:00
parent 86af6f60da
commit a0b27a806e
2 changed files with 16 additions and 6 deletions

View File

@ -63,17 +63,17 @@ export const useSlidesStore = defineStore('slides', {
const formatedAnimations: FormatedAnimation[] = []
for (const animation of animations) {
if (animation.trigger === 'click') {
if (animation.trigger === 'click' || !formatedAnimations.length) {
formatedAnimations.push({ animations: [animation], autoNext: false })
}
if (animation.trigger === 'meantime') {
const last = formatedAnimations[formatedAnimations.length - 1] || { animations: [], autoNext: false }
else if (animation.trigger === 'meantime') {
const last = formatedAnimations[formatedAnimations.length - 1]
last.animations = last.animations.filter(item => item.elId !== animation.elId)
last.animations.push(animation)
formatedAnimations[formatedAnimations.length - 1] = last
}
if (animation.trigger === 'auto') {
const last = formatedAnimations[formatedAnimations.length - 1] || { animations: [], autoNext: false }
else if (animation.trigger === 'auto') {
const last = formatedAnimations[formatedAnimations.length - 1]
last.autoNext = true
formatedAnimations[formatedAnimations.length - 1] = last
formatedAnimations.push({ animations: [animation], autoNext: false })

View File

@ -13,8 +13,13 @@ export default () => {
// 当前页的元素动画执行到的位置
const animationIndex = ref(0)
// 动画执行状态
const inAnimation = ref(false)
// 最小已播放页面索引
const playedSlidesMinIndex = ref(slideIndex.value)
// 执行元素动画
const runAnimation = () => {
// 正在执行动画时,禁止其他新的动画开始
@ -102,13 +107,18 @@ export default () => {
// 向上/向下播放
// 遇到元素动画时,优先执行动画播放,无动画则执行翻页
// 向上播放遇到动画时,仅撤销到动画执行前的状态,不需要反向播放动画
// 撤回到上一页时,若该页从未播放过(意味着不存在动画状态),需要将动画索引置为最小值(初始状态),否则置为最大值(最终状态)
const execPrev = () => {
if (formatedAnimations.value.length && animationIndex.value > 0) {
revokeAnimation()
}
else if (slideIndex.value > 0) {
slidesStore.updateSlideIndex(slideIndex.value - 1)
animationIndex.value = formatedAnimations.value.length
if (slideIndex.value < playedSlidesMinIndex.value) {
animationIndex.value = 0
playedSlidesMinIndex.value = slideIndex.value
}
else animationIndex.value = formatedAnimations.value.length
inAnimation.value = false
}
else {