data-show, data-enter, data-leave, data-transition

Overview

These declarative animation directives connect TemplateManager to AnimationManager.

Use them when animation should live in the template instead of custom JavaScript.

data-show

<aside data-show="panelOpen"
       data-show-animation="fade"
       data-show-duration="200">
  ...
</aside>

• data-show is the visibility expression
• data-show-animation chooses the animation name
• data-show-duration controls duration in milliseconds

Important: data-show expects a boolean-style expression such as panelOpen, not an animation name.

data-enter

<section data-enter="slideUp"
         data-enter-duration="350"
         data-enter-threshold="0.2">
  ...
</section>

• animation runs when the element becomes visible in the viewport
• data-enter-repeat keeps the observer active instead of animating once

data-leave

<section data-leave="fade"
         data-leave-duration="250"
         data-leave-threshold="0.1">
  ...
</section>

• animation runs when the element leaves the viewport

data-transition

<div data-transition="activeTab"
     data-transition-animation="fade"
     data-transition-duration="180">
  ...
</div>

• the expression is evaluated reactively
• when the evaluated value changes, AnimationManager replays the configured transition

Common Pitfalls

1. Using the Old data-hide Idea

There is no data-hide directive in the current TemplateManager. Use data-show with an animation option instead.

2. Passing an Animation Name to data-show

<!-- ❌ Wrong -->
<div data-show="fadeIn"></div>

<!-- ✅ Correct -->
<div data-show="isOpen" data-show-animation="fade"></div>

3. Expecting Manual Cleanup

TemplateManager removes reactive animation updates and viewport observers automatically when the element is rebound or destroyed.

Related

• AnimationManager - Runtime animation API
• data-if - Conditional DOM rendering
• data-on - Event-driven state changes