Ember CSS Transitions

This addon provides a nice way of defining CSS Transitions for Ember Components. Which means, only css based animations for performance - and no animation library needed.

Ember CSS Transitions is heavily inspired (and CSS compatible) with Vue's CSS Transitions.

Animations are completely based on CSS classes.

Documentation

• https://peec.github.io/ember-css-transitions/

How it works

Utimately you define your animations and transitions with only css like:

/* initial state */
.example-enter, .example-leave-to {
  opacity: 0;
}

/* final state */
.example-enter-to, .example-leave {
  opacity: 1;
}

/* easings */
.example-enter-active, .example-leave-active {
  transition: opacity .5s ease-in;
}

And using the included modifier like:

<div {{css-transition "example"}}>
  <h1>Hello world</h1>
</div>

or by manually specifying classes, perfect for libraries like Animate.css and Tailwind CSS.

{{!-- Using Tailwind CSS provided classes --}}
<div {{css-transition
  enterClass="opacity-0"
  enterActiveClass="transition-opacity duration-500 ease-in-out"
  enterToClass="opacity-100"
  leaveClass="opacity-100"
  leaveActiveClass="transition-opacity duration-500 ease-in-out"
  leaveToClass="opacity-0"}}>
  <h1>Hello world</h1>
</div>

Check out the homepage for more detailed documentation: https://peec.github.io/ember-css-transitions/

Install

Run:

ember install ember-css-transitions

Note Using ember-cli-autoprefixer is suggested for CSS transitions:

ember install ember-cli-autoprefixer

Tested in the following browsers / platforms:

• IE 10
• IE 11
• Microsoft Edge
• Chrome
• Firefox
• Safari
• Android
• iPhone

Note: IE9 does not support CSS3 transitions / animations. They must live with no animations / transitions.

Contribute

• git clone <repository-url> this repository
• cd my-addon
• npm install

Linting

• npm run lint:hbs
• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.