Skip to content

Ember implementation of CSS Transitions. Just like ng-animate and react animation but for Ember :)

License

Notifications You must be signed in to change notification settings

roomman/ember-css-transitions

 
 

Repository files navigation

Ember CSS Transitions Build Status Ember Observer Score

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

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

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

License

This project is licensed under the MIT License.

About

Ember implementation of CSS Transitions. Just like ng-animate and react animation but for Ember :)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 87.5%
  • HTML 5.2%
  • CSS 4.6%
  • Handlebars 2.7%