FuelInteractive / fuel-ui

UI Components for use with Angular2 and Bootstrap4
http://fuelinteractive.github.io/fuel-ui
301 stars 56 forks source link

Accordion duration inconsistent across browsers #100

Open boilermakercb opened 8 years ago

boilermakercb commented 8 years ago

While browsing the demo app-

Using Chrome 51.0.2704.103 m: The slide animation is always around 250ms. Changing the duration value has no effect.

Using Firefox 47: No slide animation shown.

Same results in my own local test app. The animation duration is always the same in chrome and no animation shown in firefox.

coryshaw1 commented 8 years ago

Since 0.3.4, we had to refactor Collapse from a directive to an animation. Prior to this version, we were able to pass through a duration from the component to the directive. Since we have refactored to an animation, we haven't been able to find a way to pass through any data from the component to the animation since animations are registered to a component prior to the component being initialized. This means the duration attribute on the accordion (along with a few other components) is unable to be passed to the animation registration.

Here is where the animation is being registered for the accordion: https://github.com/FuelInteractive/fuel-ui/blob/master/src/components/Accordion/Accordion.ts#L8

We are looking into ways to re-register the Collapse animation on these components after initialization, but at the moment there doesn't seem to be a way. Unfortunately, this means that all components using the collapse animation have durations that are hard-coded for now.

We should have removed the duration attribute from the demo, sorry for the confusion.

EDIT: As for the Firefox support, this is on the Angular team at the moment. Hoping for a wider browser support in the coming RCs