ember-css-transitions-modifiers
v0.0.1
Published
The default blueprint for ember-cli addons.
Downloads
3
Readme
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.