如何以角度為父母和孩子制作動畫？

Question

因此，據我所知，這應該是有效的……但事實並非如此……

我正在嘗試讓父級（ui-switch-groove）在顏色之間過渡，而子級（ui-switch-dongle）移動。

使用此代碼，它將為父級和子級動畫化“ false => true”，但僅在執行“ true => false”時動畫化子級。

有沒有一種方法，而不必顯式編寫父級和子級的關鍵幀？ 我以為我可以定義狀態樣式和時間安排，而其余部分則可以處理（幾乎做到了）。 如果我注釋掉query（'：self'） ，則加密狗將在兩種狀態下均正常工作。 如果我注釋掉query（'@ 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