tserkov / vue-scroll-reveal

A Vue directive to wrap @jlmake's excellent ScrollReveal library.
MIT License
163 stars 17 forks source link

Cleanup: true not working #37

Closed lmgringhuis closed 2 years ago

lmgringhuis commented 2 years ago

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 = "";
    },
  });
tserkov commented 2 years ago

vue-scroll-reveal@2 bumps ScrollReveal to v4, which supports the cleanup option.