Accordion: component should support transitions

[ryardley]

Steps

Use the Accordion component here from the docs: https://react.semantic-ui.com/modules/accordion#accordion-example-standard

import React from 'react'
import { Accordion, Icon } from 'semantic-ui-react'

const AccordionExampleStandard = () => (
  <Accordion>
    <Accordion.Title>
      <Icon name='dropdown' />
      What is a dog?
    </Accordion.Title>
    <Accordion.Content>
      <p>
        A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
        {' '}it can be found as a welcome guest in many households across the world.
      </p>
    </Accordion.Content>
    <Accordion.Title>
      <Icon name='dropdown' />
      What kinds of dogs are there?
    </Accordion.Title>
    <Accordion.Content>
      <p>
        There are many breeds of dogs. Each breed varies in size and temperament.
        {' '}Owners often select a breed of dog that they find to be compatible
        with their own lifestyle and desires from a companion.
      </p>
    </Accordion.Content>
    <Accordion.Title>
      <Icon name='dropdown' />
      How do you acquire a dog?
    </Accordion.Title>
    <Accordion.Content>
      <p>
        Three common ways for a prospective owner to acquire a dog is from pet shops,
        {' '}private owners, or shelters.
      </p>
      <p> A pet shop may be the most convenient way to buy a dog.
        {' '}Buying a dog from a private owner allows you to assess the pedigree and
        {' '}upbringing of your dog before choosing to take it home. Lastly, finding your dog
        {' '}from a shelter, helps give a good home to a dog who may not find one so readily.
      </p>
    </Accordion.Content>
  </Accordion>
)

export default AccordionExampleStandard

Expected Result

The user should see an Accordion with content expanding in and out such as the one here: https://semantic-ui.com/modules/accordion.html

Actual Result

Accordion content does not animate and instead is immediately visible or hidden.

Version

0.73.1

[levithomason]

Please note, no Transitions are included in this library, yet.

Transitions are a work in progress. We've recently merged <Transition /> and now <Accordion /> refactoring that should make this possible.

I'll leave this issue open for tracking its implementation here.

[balramsinghindia]

@levithomason Any idea when is this going to implement?

[Maxhodges]

@balramsinghindia maybe vote up the OP above

[moaxaca]

@levithomason 👍

[MaevskiyE]

We need transitions ASAP, please

[Maxhodges]

I can chip in $25. How about others?

[brianespinosa]

@MaevskiyE @moaxaca This is an open source project. All PRs are welcome from the community on anything tagged with "Help Wanted". If this feature is something you need, I would encourage you to take a shot at enhancing the project and submitting something.

@Maxhodges I am not too familiar with the tools for this, but I know open source bounty systems exist if you wanted to try to set something up on one of them to reference here. Adding additional comments into the tracking issue saying how much money you can chip in is unfortunately probably not going to help.

[moaxaca]

@brianespinosa @levithomason

I would be happy to do some of this work assuming somebody hasn't already tackled it. Is there a branch available or a roadmap with assignees? Or is this feature completely unimplemented? I am not big on making PR's without discussing some sort of technical discussion.

To create a more productive dialog on what needs to be completed. Is this really as simple as adding Transition into the life cycle hooks of Accordion & AccordionContent?

[brianespinosa]

@moaxaca That sounds awesome! 💪

This issue is being kept open to track the status of this task. In Github if you mention a task in a PR it will show up linked in the comment history here. Based on that, there is no PR open referencing this issue that is being worked on. I'd recommend the best thing to do would be to comment here that you are taking this task, and get a baseline PR open referencing the issue. That will also give the community the ability to discuss the work over actual code versus discussion over theoretical solutions.

@layershifter will probably be your best resource once you have a PR up on this. The complexity I believe here is not in adding Transition, which does need to be done, but in managing the transition when the AccordionContent becomes inactive.

This is not going to work out of the box with the Component API. It will only work automatically with the shorthand API.

[moaxaca]

@brianespinosa I will look into this over the weekend and try to come up with a path to implementation (Hopefully a PR).

[balramsinghindia]

@moaxaca any luck on this?

[brianespinosa]

@balramsinghindia the issue history is available to everyone. If you look above your comment you will see a PR working on this. You can follow along there. Repeated questions about how things are going without looking through the issue history is not helpful.

[moaxaca]

@balramsinghindia there are a few paths toward a solution. I have a working example, but it might not scale through the whole code base. This Transition API is new and this is its first implementation in an existing module.

This warrants some technical discussion but assuming we have a quick response time and can agree on a design direction it should be done shortly.

[levithomason]

Please open the PR and we'll discuss there. In the past, it has worked well for us to open the PR with a minimal initial proposal and outline all the possible API directions, benefits, and issues. We then have some talking points to collaborate over.

Take a look also at #2552, where we are discussing how to add a transition to every component. This will be achieved with a HOC that will wrap our components.

[moaxaca]

@levithomason https://github.com/Semantic-Org/Semantic-UI-React/pull/2517

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[javlund]

For some reason the associated PR was closed. Too bad, as I'd also like this feature to come to fruition.

[Maxhodges]

don't hold your breath! we were waiting for over a year. We've moved on to Vuejs with Vuetify.

[layershifter]

I've opened PR to implement this feature, see #3143. It seems that we now finally will have transitions there.

---

@Maxhodges SUIR has a big difference there.

Vuetify is a commercial product in fact while SUIR is developed by community and enthusiasts. Neither I, neither @levithomason can't to work on SUIR in the full-time mode, it's a sad fact. We have jobs and families, I hope that everyone understand this and why we can't to ship so complicated features everyday.

In the same time we keep a good quality of product and personally I don't want to ship the unstable stuff. Now we have over 75k downloads per week and this number is growing.

I understand that you gave the real feedback, but it and hateful tweets make me sad 😭

Keep calm 👍 The best way to help is to contribute 🐱

[Maxhodges]

Didn't mean to sound hateful. Was frustrated but not hateful! I understand the constraints. It's just a fact we'd been waiting for a year. I'm not a React dev; more of a product manager. VueJs and Vuetify are free btw (MIT License). The Vuetify team sells a theme, but the Vuetify UI component framework is open sourced and supported by sponsors and Patreon backers.

btw I setup and maintain the official SUI forms at https://forums.semantic-ui.com/

would anyone like to take over? the only cost is the Digital Ocean hosting ($10 monthly).

It was a bit of work to setup and get started, so I hate to just throw it away, but we aren't building with SUI anymore, so if anyone wants to take over you're welcome to it. Otherwise it will do dark at the end of this month.

Cheers!

[Maxhodges]

btw regarding funding ,you might want to see if you quality for TideLift

We’re offering a guaranteed minimum $10,000 over the next 24 months to select projects. See if your project is eligible. https://tidelift.com/about/lifter

[torishabhmehta]

I really need this feature asap. Any updates?

[IMFIL]

Any updates on the PR ?

[Kikoku]

You can use some max-height css hacks to create the expand/collapse animation. I was able to mimic the animations from https://semantic-ui.com/modules/accordion.html with the following css adjustments.

css

.ui.accordion:not(.styled) .title~.content:not(.ui) {
  /* padding: .5em 0 1em; */
  padding: 0;
}
.ui.accordion .title~.content {
  /* display: none; /*
  display: block;
}
.expand {
  transition: .4s max-height ease-out, .4s opacity ease-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden; 
}
.active.expand {
  max-height: 1000px;
  opacity: 1;
}

js

<Accordion>
  <Accordion.Title>{...}</Accordion.Title>
  <Accordion.Content className="expand">
    {...}
  </Accordion.Content>
</Accordion>

While not quite fully dynamic, the expanded state of my Accordion is never going to be greater than 1000px and works for my implementation. Using max-height and overflow:hidden we are able to use the css transition property to simulate animating the opening and closing action instead of simply toggling between display:none and display:block.

To make this dynamic, I believe you will need to expose the ref attribute on <Accordion.Content> to be able to calculate and set it's max-height, using the method outlined in w3schools Animated Accordion (Slide Down).

[abubakir1997]

The react-animate-height library seems to do a better job compared to using semantic's transition group. The animation is much cleaner and children are not unmounted and remounted.

<Accordion
  fluid
  activeIndex={this.state.activeAccordion}
  onTitleClick={this.handleAccordionClick}
  panels={someData.map((data, i) => ({
    key: i,
    title: (
      <Accordion.Title>
        {/* children */}
      </Accordion.Title>
    ),
    content: (AccordionContent, { key, active }) => (
      {/* Not Using AccordionContent to avoid instant showing/hiding */}
      {/* as a result of display: none/block */}
      <div key={key}>
        <AnimateHeight animateOpacity duration={300} height={active ? 'auto' : 0}>
          {/* children */}
        </AnimateHeight>
      </div>
    ),
  }))}
/>

This is using the short hand version of Accordion but the same can be achieved using the longer implementation.

@Kikoku this works with any height.

[maverickdude]

I'm using SUI's Transition component for showing transition on both expanding and collapsing.

Accordion: https://react.semantic-ui.com/modules/accordion/#usage-exclusive Transition: https://react.semantic-ui.com/modules/transition

In the example, I'm using inexclusive version of Accordion, which can easily be changed to regular one if anyone wants. Checkout my current implementation here: https://codesandbox.io/s/lry6k6x6ol

[hatpick]

@maverickdude I think people want the transition on the height of the content.