首页 文章

animateChild（）用于嵌套的Angular子动画不起作用

提问于
浏览 次
1

我想在点击的同时发射两个动画 . 动画触发器使用相同的状态，一个放在外部父div上，另一个嵌套在这个div中 . 进行样式更改，但转换仅应用于父组件 . 我在父动画中使用了animateChild而没有运气 . 如何应用父元素和子元素的动画？

animations.ts

import {
  trigger,
  state,
  style,
  transition,
  animate,
  query,
  group,
  animateChild,
} from "@angular/animations";

export const Animations = {
  animations: [
    trigger("expansionTrigger", [
      state(
        "true",
        style({
          height: "*"
        })
      ),
      state(
        "false",
        style({
          height: "0",
          display: "none"
        })
      ),
      transition("false <=> true", [
        group([
          query("@colExpansion", [animateChild()]),
          animate("3s ease")
        ])
      ])
    ]),
    trigger("colExpansion", [
      state(
        "true",
        style({
          "-webkit-box-flex": "0",
          flex: "0 0 66.66667%",
          "max-width": "66.66667%"
        })
      ),
      state(
        "false",
        style({
          "flex-basis": "0",
          "-webkit-box-flex": "1",
          "flex-grow": "1",
          "max-width": "100%"
        })
      ),
      transition("false <=> true", animate(3))
    ])
  ]
};

body.component.ts

import { Component, Input } from '@angular/core';
import { Animations } from '../animations';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css'],
  animations: Animations.animations
})
export class BodyComponent  {

  @Input() isExpanded: string;

}

body.component.html

<div [@expansionTrigger]="isExpanded === 'true' ? 'true' : 'false'">
    <div [@colExpansion]="isExpanded === 'true' ? 'true' : 'false'">
    </div>
</div>
angular typescript angular-animations

1 回答

  • 0

    我做了一个工作演示 . 我做了自己的风格，因为我没有理解这个组件的目的 . 您可以轻松地根据您的风格进行调整......

    animations.ts

    import {
    trigger,
    state,
    style,
    transition,
    animate,
    query,
    group,
    animateChild,
    keyframes,
} from "@angular/animations";
//
// Global Animate Time
const animateTime0 = "1s ease"
const animateTime1 = "3s"
const animateTime2 = "200ms ease-in-out"
//
// Global Animations
const fade0 = animate(animateTime2, keyframes([
    style({ opacity: 0 }),
    style({ opacity: 1 })
]))
//
// Styles
// Expansion Trigger
const expansionTriggerOnStyle = {
    height: "*",
    display: "*"
}
const expansionTriggerOffStyle = {
    height: "0",
    display: "none"
}
// Col.
const colExpansionOnStyle = {
    width: "66.66667%"
}
const colExpansionOffStyle = {
    width: "100%"
}
//
// Animations
// Expansion Trigger
function expansionTriggerAni(start, end) {
    return group([
        animate(animateTime0, keyframes([
            style(start),
            style(end)
        ])),
        query("@colExpansion", group([
            animateChild(),
            fade0
        ]))
    ])
}
//
// *Exported* Triggers
export const expansionTriggerAnimation = trigger("expansionTrigger", [
    //
    // States
    state("on", style(expansionTriggerOnStyle)),
    state("off", style(expansionTriggerOffStyle)),
    //
    // Transitions
    transition(
        "on => off",
        expansionTriggerAni(expansionTriggerOnStyle, expansionTriggerOffStyle)
    ),
    transition(
        "off => on",
        expansionTriggerAni(expansionTriggerOffStyle, expansionTriggerOnStyle)
    )
])
export const colExpansionAnimation = trigger("colExpansion", [
    //
    // States
    state("on", style(colExpansionOnStyle)),
    state("off", style(colExpansionOffStyle)),
    //
    // Transitions
    transition("on <=> off", animate(animateTime1))
])

    body.component.ts

    import { Component, OnInit } from '@angular/core';
import { expansionTriggerAnimation, colExpansionAnimation } from './animations';

@Component({
  selector: 'body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss'],
  animations: [
    expansionTriggerAnimation,
    colExpansionAnimation
  ]
})
export class BodyComponent implements OnInit {
  isExpanded: boolean
  status: string = 'off'

  constructor() { }

  ngOnInit() {
  }

  toggle() {
    this.isExpanded = !this.isExpanded
    this.status = !this.isExpanded ? 'off' : 'on'

    console.log("Status:", this.status)
  }

}

    body.component.scss

    .wrapper {
    width: 200px;
    height: 50px;

    background-color: gray;
    cursor: pointer;

    overflow: hidden;

    .col {
        width: 100%;
        background-color: beige;
    }
}

    body.component.html

    <button (click)="toggle()">Toggle expansion</button>

<div class="wrapper" [@expansionTrigger]="status">
    <div class="col" [@colExpansion]="status">
        I am col
    </div>
</div>

    When expanded

    回复于

相关问题