vue-scroll-reveal icon indicating copy to clipboard operation
vue-scroll-reveal copied to clipboard

Cleanup: true not working

Open lmgringhuis opened this issue 3 years ago • 0 comments

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 = "";
    },
  });

lmgringhuis avatar Jan 17 '22 14:01 lmgringhuis