ts1/flipbook-vue

Background transparent on flipped page animation

aqordeon opened this issue ยท 2 comments

Hi, anyway thanks for the package.

I facing an issue which is the flipped page is transparent on animation and appear instantly when the animation is finished. Did anybody ever face this issue? Or was just I wrong when implemented it? I use Nuxt 3.

SOLVED.
This issue is strange.
The issue occurs because the filename of the image contains a space, "123 abc.jpg" would occur the issue, but "123abc.jpg" would work well.

I found a workaround to this issue. Replacing invalid characters with their encoded equivalents before passing the list of urls to the component fixes the bug.

data() {
    const urls = originalUrlList.map((url) => {
      return url.replace("(", "%28").replace(")", "%29").replace(" ", "%20")
    })
    return {
      pages: [null, ...urls],
      hasMouse: true,
      pageNum: null,
    }
}