panel component animation 'collapsed model' driven bug

[dennyak47]

Bug report
code here:
<p-panel [(collapsed)]="show">

show = false;

Current behavior
I use a variable to control the collapsed status of panel component, but the animation of unfolding has some problem: it completely unfolds at first and gradually unfolds again later, which appears that a line of border drop down after unfold.

Expected behavior
it should be like what the demo shows.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
Collapsed status should be model driven.

Please tell us about your environment:
win7

• Angular version: 2.0.X
  5.1.0

• PrimeNG version: 2.0.X
  5.2.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  all

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript 2.5.3

• Node (for AoT issues): node --version =
  8.9.3

[fMeow]

Same here. It acts like that the content show up immediately after toggling the collapsed state. I guess the animation and visible state of content are triggered simultaneously.

[fMeow]

I find a workaround that use accordion instead of p-panel. When using only one tab, accordion is just like panels.

    <p-accordion activeIndex="show">

      <p-accordionTab>
          <div></div>
      </p-accordionTab>
    </p-accordion>

When show===0 or show===false, the only tab is selected and thus content shows up. Otherwise, accordion here is collapsed. Animation works just as expected.

This can be a temporary and tricky workaround.

[tudorpetrean]

In my case, I made the component which was after the panel position: relative; and after this, it worked.