aurelia / aurelia/animator-css

Support CSS3 transition

Open
#68 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
44
Forks
25
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a feature request**

* **Library Version:**
1.0.4

**Please tell us about your environment:**
* **Operating System:**
Windows [7|10]

* **Node Version:**
10.1.0

* **NPM Version:**
6.4.0

* **JSPM OR Webpack AND Version**
webpack 4.0

* **Browser:**
all

* **Language:**
TypeScript 3.0

**Current behavior:**

`animator-css` can not work with css3 `transitions`. you can find the detail [here](https://discourse.aurelia.io/t/how-to-use-css-transitions-in-aurelia-animator-css/1827)

**Expected/desired behavior:**

* **What is the expected behavior?**
It would be great if we have `transitions` as option beside `animations`.

* **What is the motivation / use case for changing the behavior?**

@zewa666
I think it is so tricky I am not sure works for every scenario but as you asked me you can find the following sample.

**Detecting transition start**
[Website](https://www.madebymike.com.au/writing/detecting-transition-start/)
[Implementation](https://codepen.io/MadeByMike/pen/sBjzn)

Contributor guide

Open the contributing guide

Research direction

Start by reading the existing animator-css implementation and the linked Aurelia discussion about CSS transitions. Review the linked transition-start article and CodePen for the proposed detection approach, then define how a transitions option should behave alongside animations. Done means CSS3 transitions are supported without breaking existing animation behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.