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 predicate=this.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: 

<LiquidOutlet @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">
  <LiquidOutlet />
</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}} .