ember-css-transitions-modifiers

🚧 Work in progress

This is an Ember.js element modifiers solution for attaching CSS transitions, heavily inspired by the old component-based approach offered by ember-css-transitions.

Installation

ember install ember-css-transitions-modifiers

Usage

Use the css-transition modifier, as shown below:

<div {{css-transition "fade"}}>
  Watch me transition!
</div>

Define transitions in CSS. The modifier will add -enter, -enter-active, -leave & -leave-active suffixes at the appropriate times on insertion and removal.

.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}
.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

Define multiple classes using a space delimited string. Note that CSS transitions set on multiple classes will not work together.

<div {{css-transition "foo bar"}}>
  Setting transition suffixes for both classes
</div>

Conditional Transitions

Transitions can be toggled on and off using enter and leave named args. Truthy values do not need to be specified, but for the sake of this example:

<div {{css-transition "fade" enter=false leave=true}}>
  Will only transition on leave
</div>

Timing Functions

The transition-delay CSS property can be defined (in ms) via delay, enterDelay and leaveDelay named args:

<div {{css-transition "fade" delay=1000}}>
  Sets a custom delay on enter & leave transitions
</div>

<div {{css-transition "fade" enterDelay=2000 leaveDelay=3000}}>
  Sets different custom delays for enter & leave transitions
</div>

The transition-duration CSS property can be defined (in ms) via duration, enterDuration and leaveDuration named args:

<div {{css-transition "fade" duration=1000}}>
  Sets a custom delay on enter & leave transitions
</div>

<div {{css-transition "fade" enterDuration=2000 leaveDuration=3000}}>
  Sets different custom durations for enter & leave transitions
</div>

Activation

The active parameter allows transitions to be fired via a named arg, rather than lifecycle hooks. This allows use cases where:

Transitions need to be run without the element being added & removed from the DOM (e.g. on-scroll implementations).
The element may need to be rendered via Fastboot (e.g. SEO critical content).

<div {{css-transition "fade" active=this.isActive}}>
  Content is always present in the DOM, with the transition firing via active named arg
</div>

Events

Attach actions to onEnter and onLeave events using named arguments:

<div {{css-transition "fade" onEnter=this.onEnter onLeave=this.onLeave}}>
  Do something when the transition has entered and when it has left!
</div>

Compatibility

Ember.js v3.4 or above
Ember CLI v2.13 or above
Node.js v8 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

willviles/ember-css-transitions-modifiers