CSS - image jumps below image during transition

[bikedel]

Hello,

I am not sure if I need css or how to implement it. Below is the code I am using.

It all works apart from during the transition the 'transition to image' is below the transition and when the transition is over it jumps back up into position.

Very nice work! Thank you

/*

<button @click="$refs.slider.show('next')">NEXT</button>

<style> .FluxImage </style> <script setup> import { ref, shallowReactive, onMounted } from "vue"; import { VueFlux, Img, Fade, Wave, Cube, Book, Waterfall, Swipe, Zip, Blinds2D, Kenburn, Blocks1, Warp, Explode, FluxControls, FluxIndex, } from "vue-flux"; const mounted = ref(false); const rscs = shallowReactive([ new Img("images/f1.jpg"), new Img("images/f2.jpg"), new Img("images/s1.png"), ]); const transitions = shallowReactive([Wave, Fade, Warp, Book]); const options = shallowReactive({ allowFullscreen: true, autoplay: true, bindKeys: true, infinite: true, controls: true, lazyLoadAfter: 10, }); onMounted(() => { mounted.value = true; }); */

[ragnarlotus]

Yes, in your main.js or main.ts you need to import the CSS like this:

import '../node_modules/vue-flux/dist/style.css';

Cheers and thanks for your words

[bikedel]

Hello Thanks for the quick reply! Great it is working.

…

On 2023 Feb6, at 16:49, ragnarlotus ***@***.***> wrote: Yes, in your main.js or main.ts you need to import the CSS like this: import '../node_modules/vue-flux/dist/style.css'; Cheers and thanks for your words — Reply to this email directly, view it on GitHub <#106 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD6QUM5LVGORJ2TWLV33DQTWWEFRBANCNFSM6AAAAAAUSWPC3Q>. You are receiving this because you authored the thread.