ember-css-transitions

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://miguelcobain.github.io/ember-css-transitions/

How it works

Ultimately 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 0.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>

If you are using TailwindUI then you will see transition instructions included in the code, as in this example:

<!--
  Slide-over panel, show/hide based on slide-over state.

  Entering: "transform transition ease-in-out duration-500 sm:duration-700"
    From: "translate-x-full"
    To: "translate-x-0"
  Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
    From: "translate-x-0"
    To: "translate-x-full"
-->

You should map these instructions to this addon's API in the following way:

TailwindUI	Addon
Entering	enterActiveClass
From	enterClass
To	enterToClass
Leaving	leaveActiveClass
From	leaveClass
To	leaveToClass

Check out the homepage for more detailed documentation: https://miguelcobain.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 https://github.com/miguelcobain/ember-css-transitions.git 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 test-app application

• ember serve
• Visit the test-app 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.

Changelog

v4.2.0 (2022-09-21)

:rocket: Enhancement

• #103 remove class properties transpilation (@SergeAstapov)
• #95 feat: Add glint types (@muziejus)
• #98 Replace use of RSVP with native Promise (@SergeAstapov)

Committers: 2

• Moacir P. de Sá Pereira (@muziejus)
• Sergey Astapov (@SergeAstapov)