Deeply Nested AnimatedContainers get Hidden on Load

[scudco]

Describe the bug When deeply nesting <AnimatedContainer>s in an {{animated-each}} without wrapper elements, the inner containers end up having .ember-animated-hidden applied to them.

To Reproduce The twiddle would not work with the latest version of ember-animated (0.9.0) so I made a repo here https://github.com/scudco/ember-animated-nesting

However, I did notice that this behavior does not occur on the twiddle using ember-animated 0.5.4 https://ember-twiddle.com/9c2d5587abd9ace38f7fd6dcd1807439?numColumns=2&openFiles=controllers.application.js%2Ctemplates.application.hbs

Steps to reproduce the behavior:

1. Clone https://github.com/scudco/ember-animated-nesting
2. yarn
3. yarn start

Expected behavior All elements should be visible without needing to wrap nested <AnimatedContainer>s in an explicit <div>

Screenshots

Desktop:

• OS: macOS 10.15.1
• Browser: Chrome
• Version: 78.0.3904.97

Additional context I'm trying to track down exactly why this is happening, but the hiding appears to occur at https://github.com/ember-animation/ember-animated/blob/41b54e791f08d3f444d3d11dd21b27839d3c14ab/addon/components/animated-each.js#L565

---

One of the reasons I'm attempting to deeply nest containers this way is because I have a recursive data structure that defines flexbox containers and items. Each container needs to have be able to animate its nested items and containers. Putting wrapper divs around containers necessarily messes with recursing the data structure into components that are reliant on flexbox classes.

<div class="animated-container">
  <div class="flex flex-row justify-around">
    <div class="w-1/4">1</div>
    <div class="w-1/4">2</div>
    <div class="flex flex-col"> <!-- This needs to be in an animated container -->
      <div>3</div>
      <div>4</div>
    </div>
  </div>
</div>

---

Adding an <AnimatedContainer> around a container’s items breaks the container's flex layout

<div class="animated-container">
  <div class="flex flex-col justify-around">
    <div class="w-1/4">1</div>
    <div class="w-1/4">2</div>
    <div class="flex flex-row">
      <div class="animated-container"> <!-- This will break the flex layout -->
        <div class="w-1/2">3</div>
        <div class="w-1/2">4</div>
      </div>
    </div>
  </div>
</div>

---

Using <AnimatedContainer> as the flexbox container (e.g., <AnimatedContainer class="flex flex-col">) seems to work except it is hidden by animated-each unless the animated-each’s block is explicitly wrapped in a div (or other element). This leads back to breaking the flex layout.

<div class="animated-container">
  <div class="flex flex-row justify-around">
    <div class="w-1/4">1</div>
    <div class="w-1/4">2</div>
    <div class="flex flex-col animated-container"> <!-- This will be hidden by `animated-each` -->
      <div>3</div>
      <div>4</div>
    </div>
  </div>
</div>

---

I'm all ears if I am tackling this problem incorrectly.

[ef4]

Thanks for a thorough bug report. You're right, we have a bug when the direct child of animated-each (or animated-value or animated-if, which use the same implementation) is another animator component, including AnimatedContainer.

[marcemira]

Any updates on a fix for this? Thanks

[takshch]

I have encountered this error too. Anyway to fix this error?