Question

我有一个带有嵌套子组件的父组件，它们都有：enter和：leave动画。要同时运行两个动画，请使用group（）和animateChild（）函数。但是，如果父animate（）调用位于group（）调用内，则父状态转换不会显示动画。

public File getPhotoFile() {
    //create a random name
    String randomName = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
    File path = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM);
    File mainPath = new File(path, "/Images");

    if (!mainPath.exists()) {

        mainPath.mkdirs();
    }

    File photoPath = new File(mainPath, randomName + ".jpg");
    return photoPath;
}

public File getVideoFile() {
    //create a random name
    String randomName = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
    File path = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM);
    File mainPath = new File(path, "/Videos");

    if (!mainPath.exists()) {

        mainPath.mkdirs();
    }

    File photoPath = new File(mainPath, randomName + ".mp4");
    return photoPath;
}

因此，我必须分别描述animations: [ trigger('child', [ state('void', style({ opacity: 0 })), transition('void <=> *', animate('1750ms ease-in')) ]), trigger('parent', [ state('void', style({ height: 0 })), transition('void <=> *', group([ animate('1750ms ease-out'), query('@child', [ animateChild() ]) ])) ]) ]和void => *父级过渡，并将父级样式描述移入过渡。但是在这种情况下，父动画的描述要复杂得多：

* => void

更新：

可以通过将父动画移动到单独的动画中来改善上述解决方法：

trigger('parent', [
    transition('void => *', [
        style({
            height: 0
        }),
        group([
            animate('1750ms ease-in', style({
                height: '*'
            })),
            query('@child', [
                animateChild()
            ])
        ])
    ]),
    transition('* => void', [
        style({
            height: '*'
        }),
        group([
            animate('1750ms ease-in', style({
                height: 0
            })),
            query('@child', [
                animateChild()
            ])
        ])
    ])
])

Answer 1

我找到了解决方法！尝试交换query()和animate()。我认为这是一个错误，不确定。

我已报告此问题：https://github.com/angular/angular/issues/28654

如果将animate（）放入group（），则无法正确设置状态之间的角度过渡

1 个答案: