title: Animation with initial/after state
body: <p>I'm trying to sort through how to do an Angular animation with an initial state. I'm trying to develop a slide up/down animation, so far with:</p>
  
  <pre><code>trigger(
      'slideHeight',
      [
          state('closed', style({
              display: 'none',
              height: 0
          })),
          state('open', style({
              // display: 'block',
              height: '*'
          })),
          transition('* &lt;=&gt; *', [
              style({
                  display: 'block'
              }),
              animate('.5s ease')
          ])
      ]
  )
  </code></pre>
  
  <p>In the jQuery version, the element in question has <code>display: none</code> on it, and I notice that jQuery slides open, and then I see <code>display: block</code> on the final element.</p>
  
  <p>When I have <code>display: 'block'</code> commented out as above, it works as expected, however, when the page loads, it starts with the elements going from full height to none (which makes sense I guess?), which is weird for the user.</p>
  
  <p>I'm trying to figure out how I can set it up so when closed, first it goes to <code>display: block</code>, runs the height animation, and holds block. In the other direction, I want to have block until it's done, adding a <code>display: none</code>.</p>
  
  <p>I've tried adding a class with display none, but as animations don't add a class before/after, it didn't quite work as expected. I suspect this should be a combination of the Angular animation JS and CSS classes, but I can't quite figure out the pattern. Any advice in how to address this would be great.</p>