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.

Compatibility

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

Installation

ember install ember-css-transitions-modifiers

Usage

Use the css-transition modifier, as shown below:

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

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

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

Define as many animation classes as you want using a space delimited string:

<div {{css-transition "fade-in move-up"}}>
  Watch me fade-in and move-up!
</div>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.