DOM & Template Constraints

These constraints let you target a transition rule based on the surrounding DOM and/or template.

hasClass

Takes a class name and matches it against the animated element. For example, this transition:

this.transition(
  this.hasClass('magical'),
  this.use('crossFade')
);

Will match an animated element like this one:

{{#liquid-if isUnicorn class="magical"}}
  It's a unicorn!
{{else}}
  It's something else!
{{/liquid-if}}

matchSelector

Takes a CSS selector and tests whether the animated element matches the selector. For example, this rule:

this.transition(
  this.matchSelector('.main-container'),
  this.use('toUp')
);

Will match against this template:

{{liquid-outlet class="main-container"}}

childOf

Takes a CSS selector and tests whether the animated element's parent matches the selector. For example, this rule:

this.transition(
  this.childOf('#main-container'),
  this.use('toUp')
);

Will match against this template:

<div id="main-container">
  {{liquid-outlet}}
</div>

inHelper

Takes the name of a helper, and matches only within that kind of helper. For example, this.inHelper('liquid-if') will constrain the rule to only apply to {{#liquid-if}}.

« Matching by media query
Matching initial renders »