Angular.io v8: animate object and query()-children simple and together

I lack some understanding, how Angular.io (V8) animation works:

I want to animate a base object and its children:

https://stackblitz.com/edit/angular-yrxvby

<div class="wrap"
    [@anim1]="anim1" [@anim2]="anim2"
    (@anim1.start)="onAnimationEvent($event)"
    (@anim1.done)="onAnimationEvent($event)"
>
    <button [class.active]="anim1" (click)="toggleAnim1()">Anim 1</button>
    <button [class.active]="anim2" (click)="toggleAnim2()">Anim 2</button>

    <hr>
    <b class='b'>B</b>
    <b class='b'>B</b>
    <b class='b'>B</b>
    <b class='b'>B</b>
</div>

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 => false', [
        animate('1s linear')
      ]),
      transition('false => true', [
        animate('.2s linear')
      ]),
    ]),
    trigger('anim2', [
      transition('* => false', [
        query('b', animate( 1000, style({ border: '12px solid cyan' })))
      ]),
      transition('* => 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() {
  }
}

• animating the base object basically works: purple-ish to green-ish and back (triggered by a status change triggered by a button)
• animating the contained <b> tags however does not work as expected: 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).

So, it’s neithing coming from nor going to its final animation state, so-to-speak.
What am I doing wrong?

I did notice, that I put the b-styles within a query within transition (based on stuff I have seen), is there a way, to put them inside a state() ?

Can I combine the main-object animation (anim1) and child animation (anim2)? (In the most simple, toggle-forth-and-back-style way. One variable to forth-and-back ’em all…)

I did notice, that upon reload also the main object sometimes has its (prior-to-animation) css base colors briefly appearing…

If I could I would indeed want to start on everything with the .css-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”. Is that possible?

Should I maybe not start with false but with undefined, and/or do something (grouped?) along the lines of * <=> true, false <=> true ?