Fade In/Out

Smooth opacity transitions on show/hide using data-transition.

Live Demo

Fade transition

This element fades in and out smoothly.

Scale transition

This element scales in and out.

Source

HTML + JavaScript + CSS 
<div data-component="fade-example">
    <button data-action="toggleFade">Toggle Fade</button>
    <button data-action="toggleScale">Toggle Scale</button>

    <!-- data-transition applies CSS classes on enter/leave -->
    <div data-show="showFade" data-transition="fade">
        Fading content here.
    </div>

    <div data-show="showScale" data-transition="scale">
        Scaling content here.
    </div>
</div>

<style>
/* Fade: opacity 0 &rarr; 1 on enter, 1 &rarr; 0 on leave */
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 0.3s ease; }
.fade-leave { opacity: 1; }
.fade-leave-active { opacity: 0; transition: opacity 0.3s ease; }

/* Scale: shrink + fade on enter/leave */
.scale-enter { opacity: 0; transform: scale(0.9); }
.scale-enter-active { opacity: 1; transform: scale(1);
    transition: opacity 0.2s, transform 0.2s; }
.scale-leave { opacity: 1; transform: scale(1); }
.scale-leave-active { opacity: 0; transform: scale(0.9);
    transition: opacity 0.2s, transform 0.2s; }
</style>

<script>
wildflower.component('fade-example', {
    state: { showFade: true, showScale: true },
    toggleFade() { this.showFade = !this.showFade; },
    toggleScale() { this.showScale = !this.showScale; }
});
</script>

Key Points

  • data-transition="fade" tells WF to apply CSS classes on show/hide: .fade-enter → .fade-enter-active on show, .fade-leave → .fade-leave-active on hide
  • Name anything you want: data-transition="zoom" would use .zoom-enter, .zoom-enter-active, etc.
  • Works with both data-show and data-render
  • Rapid toggles are handled gracefully. If toggled mid-transition, WF cancels and starts the new transition

Related documentation

Transitions →