I have a Vue component that utilizes swiper.js for slide animations. The desired effect is for an image to transition from right to left, expanding from 300x300px to fill the screen, with content such as a title and description overlaying the text.
Currently, I have achieved this by bringing in the image from right to left, allowing it to fill the screen before fading and disappearing. Prior to its disappearance, the component displays a background image which seamlessly transitions into the new slide's image, creating a blended effect with the background. While this process works smoothly in one direction, the issue arises when attempting to rewind the animation. The background image simply flips instantly without recognizing the fade transition applied to that element.
I am seeking assistance to identify any possible errors in my code. Please find the code snippet below where a picture element contains an image that should be updated with a fading effect. Moving forward appears to work as intended since the element is technically hidden, but the transitioning seems ineffective when rewinding.
<template>
<div class="c-screen">
<!-- Insert HTML elements here -->
</div>
</template>
<script>
// Import necessary components
export default {
data() {
return {
backgroundUrl: '/dist/images/icons.svg#icon-connect'
}
},
props: {
// Define props here
},
components: {
// Declare components used in the template
},
computed: {
// Compute properties here
}
}
</script>
If additional information is needed, please do not hesitate to ask. Despite searching for a solution, I am unable to pinpoint the exact cause of the issue. Both the picture and img elements have a display block and a set height of 100%.
Thank you in advance for your help.