Как оживить родителя и ребенка в угловых?

Question

Итак, из всего, что я могу сказать, это должно работать ... но это не так ...

Я пытаюсь получить родительский (ui-switch-groove) переход междуцвета, пока ребенок (ui-switch-dongle) движется.

С этим кодом, как есть, он анимирует «false => true» как для родителя, так и для потомка, но анимирует дочерний элемент только при выполнении «true => false»

Есть ли способсделать это без явной записи ключевых кадров для родителя и ребенка?Я думал, что смогу определить стили состояния и сроки, и он будет обрабатывать все остальное (и почти сделал).Если я закомментирую запрос (': self') , тогда ключ будет работать правильно для обоих состояний.Если я закомментирую запрос ('@ dongleState') , то канавка будет работать правильно для обоих состояний.

Я также могу заставить его анимировать две части, одну за другой, но это не то, что я пытаюсь сделать.

app.component.html

<app-ui-switch name="trueSet" checked="true" text="OFF" alt="ON"></app-ui-switch>

ui-switch.component.ts

@Component({
    inputs: ['checked','text','alt','height','width'],
    outputs: ['checked','state'],
    selector: 'app-ui-switch',
    templateUrl: './ui-switch.component.html',
    styleUrls: ['./ui-switch.component.css'],
    animations: [
        trigger('grooveState', [
            state('inactive',
                style({
                    backgroundColor: 'var(--negative-primary-color)',
                })
            ),
            state('active',
                style({
                    backgroundColor: 'var(--positive-primary-color)',
                })
            ),
            transition('inactive <=> active',[
                group([
                    query(':self', [
                        animate('500ms'),
                    ]),
                    query('@dongleState', [
                        animateChild(),
                    ])
                ])
            ]),
        ]),
        trigger('dongleState', [
            state('inactive',
                style({
                    transform: 'translateX(155px)',
                })
            ),
            state('active',
                style({
                    transform: 'translateX(5px)',
                })
            ),
            transition('inactive <=> active',
                animate('500ms')
            ),

        ]),
    ]
})
export class UiSwitchComponent implements OnInit {
    state : boolean;
    stateString : string;

    @Input() 
    set checked(val){
        this.state = Boolean(val);
        if(val === false || val.toString()==="false" || typeof(val) === "undefined"){
            this.state = false;
        }else{
            this.state = true;
        }
        this.stateString = (this.state===true?"active":"inactive");
        console.log("set value",val,typeof(val),this.state);
    }
    get checked(){
        console.log("get value");
        return this.state;  
    }

    constructor() {
        if (typeof(this.state)==="undefined"){
            this.checked = false;
        }
    }
    ngOnInit() {
    }
    slide(e : Event){
        e.stopPropagation();
        this.checked = !this.state;
        this.onStateChange.emit(this.state);
    }
}

ui-switch.component.html

<div class="ui-switch-wrapper">
    <div class="ui-switch-groove test" (click)="slide($event)" [@grooveState]="stateString">
        <div class="ui-switch-label" (click)="slide($event)">{{ state === true ? text : alt }}</div>
        <div class="ui-switch-dongle" (click)="slide($event)" [@dongleState]="stateString" ></div>
        <input class="ui-switch-input" type="checkbox" [(ngModel)]="state" hidden>
    </div>
</div>

ui-switch.component.css

.ui-switch-wrapper {
  display: inline;
  --positive-primary-color: #5cb85c;
  --positive-secondary-color:#33cc66;
  --negative-primary-color: #FD0011;
  --negative-secondary-color: #f64437;
  --tertiary-color: #DDDDDD;
  --quartenary-color: #FFFFFF;
  --switch-height: 50px;
  --switch-width: 200px;
  --switch-padding: 5px;
}

.ui-switch-groove {
  background-color: var(--positive-primary-color);
  position: relative;
  display: flex;
  height: var(--switch-height);
  width: var(--switch-width);
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
  border-radius: calc( var(--switch-height) / 2);
}

.ui-switch-dongle {
  position: absolute;
  transform: translateX(5px);
  height: 40px;
  width: 40px;
  border-radius: 100%;
  background-color: var(--tertiary-color);
  content: "";
}

.ui-switch-label {
  display: inline;
  position: relative;
  font-size: 28px;
  color: var(--quartenary-color);
  padding-left: calc(var(--switch-height) / 2);
  user-select: none;
  vertical-align: middle;
  margin-left: 5px;
}

Answer 1

Похоже, порядок в анимационной группе перехода имеет значение.Я разделил его на два перехода

        transition('inactive => active',[
            group([
                query(':self', [ animate('500ms') ]),
                query('@dongleState', [ animateChild() ])
            ])
        ]),
        transition('active => inactive',[
            group([
                query('@dongleState', [ animateChild() ]),
                query(':self', [ animate('500ms') ]),
            ])
        ]),

, теперь он работает, как задумано, я думаю https://stackblitz.com/edit/angular-4mzwy8