title: Angular.io v8: animate object and query()-children simple and together
body: <h3>I lack some understanding, how Angular.io (V8) animation works:</h3>
  <p><strong>I want to animate a base object <em>and</em> its children:</strong></p>
  <p><a href="https://i.stack.imgur.com/DhsZG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DhsZG.png" alt="enter image description here" /></a></p>
  <h3><a href="https://stackblitz.com/edit/angular-yrxvby" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-yrxvby</a></h3>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;wrap&quot;
      [@anim1]=&quot;anim1&quot; [@anim2]=&quot;anim2&quot;
      (@anim1.start)=&quot;onAnimationEvent($event)&quot;
      (@anim1.done)=&quot;onAnimationEvent($event)&quot;
  &gt;
      &lt;button [class.active]=&quot;anim1&quot; (click)=&quot;toggleAnim1()&quot;&gt;Anim 1&lt;/button&gt;
      &lt;button [class.active]=&quot;anim2&quot; (click)=&quot;toggleAnim2()&quot;&gt;Anim 2&lt;/button&gt;
  
      &lt;hr&gt;
      &lt;b class='b'&gt;B&lt;/b&gt;
      &lt;b class='b'&gt;B&lt;/b&gt;
      &lt;b class='b'&gt;B&lt;/b&gt;
      &lt;b class='b'&gt;B&lt;/b&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { trigger, transition, group, query, style, animate, keyframes, state } from '@angular/animations';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    animations: [
      trigger('anim1', [
        state('true', style({
          border: '10px solid pink',
          backgroundColor: 'purple',
        })),
        state('false', style({
          border: '10px solid lime',
          backgroundColor: 'green',
        })),
        transition('true =&gt; false', [
          animate('1s linear')
        ]),
        transition('false =&gt; true', [
          animate('.2s linear')
        ]),
      ]),
      trigger('anim2', [
        transition('* =&gt; false', [
          query('b', animate( 1000, style({ border: '12px solid cyan' })))
        ]),
        transition('* =&gt; true', [
          query('b', animate( 1000, style({ border: '4px solid red' })))
        ]),
      ])
    ] // animations
  })
  export class AppComponent {
    anim1 = false;
    anim2 = false;
  
    toggleAnim1() {
      this.anim1 = !this.anim1;
    }
  
    toggleAnim2() {
      this.anim2 = !this.anim2;
    }
  
    ngOnInit() {
    }
  }
  
  </code></pre>
  <ul>
  <li><strong>animating the base object basically works:</strong> purple-ish to green-ish and back (triggered by a status change triggered by a button)</li>
  <li><strong>animating the contained <code>&lt;b&gt;</code> tags however does not work as expected:</strong> Sure, for the time of the transition the color changes (to red-ish resp. blue-ish colors), but before and after it abruptly snaps back to the default color (white border around).</li>
  </ul>
  <p>So, it's neithing coming from nor going to its final animation state, so-to-speak.
  <strong>What am I doing wrong?</strong></p>
  <p>I did notice, that I put the b-styles within a query within transition (based on stuff I have seen), <strong>is there a way, to put them inside a <code>state()</code> ?</strong></p>
  <p>Can I combine the main-object animation (anim1) and child animation (anim2)? (In the most simple, toggle-forth-and-back-style way. <em>One variable to forth-and-back 'em all</em>...)</p>
  <p>I did notice, that upon reload also the main object sometimes has its (prior-to-animation) css base colors briefly appearing...</p>
  <p>If I could I would indeed want to start on <em>everything</em> with the <code>.css</code>-defined colors, thus only have to specify “the other state” (the active one) within the component source, avoiding to replicating the css Styles for “back-to-normal”. <strong>Is that possible?</strong></p>
  <p>Should I maybe not start with <code>false</code> but with undefined, and/or do something (grouped?) along the lines of <code>* &lt;=&gt; true, false &lt;=&gt; true</code> ?</p>