vue-scroll-reveal
vue-scroll-reveal copied to clipboard
Cleanup: true not working
I've added cleanup: true in the plugin options setup, however it's not cleaned up after the reveal is done, the styles are still there. Is it not supported in this wrapper or am I doing something wrong?
Running on Nuxt, my plugin file:
import Vue from 'vue'
import VueScrollReveal from 'vue-scroll-reveal';
Vue.use(VueScrollReveal, {
duration: 600,
scale: 1,
distance: '100px',
delay: 200,
viewFactor: 0.2,
cleanup: true,
});
How it's used in the template:
<div class="w-full mx-auto" v-scroll-reveal>...</div>
How the style persists in the source after the reveal is done:
<div class="w-full mx-auto" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 0.6s cubic-bezier(0.5, 0, 0, 1) 0.2s, transform 0.6s cubic-bezier(0.5, 0, 0, 1) 0.2s;">...</div>
Workaround
I've used the afterReveal callback to hide the applied style manually:
Vue.use(VueScrollReveal, {
duration: 600,
scale: 1,
distance: '100px',
delay: 200,
viewFactor: 0.2,
cleanup: true,
afterReveal(el) {
el.style = "";
},
});