npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-css-transitions

v4.4.1

Published

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

Downloads

33,182

Readme

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

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:

  • [x] IE 10
  • [x] IE 11
  • [x] Microsoft Edge
  • [x] Chrome
  • [x] Firefox
  • [x] Safari
  • [x] Android
  • [x] iPhone

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

Glint usage

css-transition ships Glint types, which allow you when using TypeScript to get strict type checking in your templates.

Unless you are using strict mode templates (via first class component templates), Glint needs a Template Registry that contains entries for the element modifier provided by this addon. To add these registry entries automatically to your app, you just need to import ember-css-transitions/template-registry from somewhere in your app. When using Glint already, you will likely have a file like types/glint.d.ts where you already import glint types, so just add the import there:

import '@glint/environment-ember-loose';

import type CssTransitionsRegistry from 'ember-css-transitions/template-registry';

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry extends CssTransitionsRegistry, /* other addon registries */ {
    // local entries
  }
}

Usage with <template> tag

For usage in gts or gjs files, modifier is exported from the index:

import { cssTransition } from 'ember-css-transitions';

<template>
  <div
    {{cssTransition
      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>
</template>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.