search

dpc-sdp / ripple

Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js
Apache License 2.0
61 stars 37 forks source link

Accordions don't always display closed animation. #934

Open alan-cole opened 3 years ago

alan-cole commented 3 years ago

Describe the bug Accordions display a slide down animation on open. (Correct) On close, the animation often does not display and will usually close immediately. (Incorrect) When clicking an accordion header during it's transition; it will either immediately open or close, with a slight delay before the text hides. This can lead to an open accordion with no text. (Generally it looks buggy)

To Reproduce Steps to reproduce the behaviour:

  1. Go to https://www.ripple.sdp.vic.gov.au/?path=/story/organisms-accordion--accordion
  2. Repeatedly click the accordion to open and shut and observe results. See video below as an example.

Expected behaviour Clicking an accordion to open will display a slide down animation. Clicking to close will display a slide up animation. Clicking during a transition should halt the current animation and perform the expected (opposite) animation. E.g. Click while opening should initiate close / clicking while closing should initiate open.

Actual behaviour See "Describe the bug"

Screenshots https://user-images.githubusercontent.com/12739575/113796671-23b54100-9793-11eb-9cd2-4da281f264c8.mp4

Versions

Desktop (please complete the following information):

dylankelly commented 3 years ago

Hey @alan-cole thanks for the Bug report. I've confirmed the issue, and have added it to the backlog as SDPA-5283. Might need to lock out accordionClick whilst its transitioning, idk i'd have to have a look at it in more detail.