Question

我尝试使用内部箭头元素的附加动画创建侧边菜单：

https://stackblitz.com/edit/angular5-menu-animation

在此实现中，动画按下一个顺序工作：

菜单正在打开
箭头正在旋转

但我想同时开始这2个动画。它在Angular 4.4.x中运行良好，但在5.2.x中不起作用。

在这个问题上需要一些帮助。

Answer 1

您可以查看我的工作叉here。

您必须添加group函数，以便在默认情况下执行序列时，并行执行步骤而不是按顺序执行。

function setBackTrace(){
    $backTraceData = debug_backtrace();
    $traceObject = array_reduce($backTraceData, function ($str, $val2) {
        if (trim($str) === "") {
            return $val2['function'];
        }
        return $str . " -> " . $val2['function'];
    });
    return $traceObject;
}

function getfunctionDo1(){
    return setBackTrace();
}


function getfunctionDo2(){
    return setBackTrace();
}

class DoSomething {

    static function callfunctionTodo($type){
        return (($type === 1) ? getfunctionDo1() : getfunctionDo2());
    }
}

echo DoSomething::callfunctionTodo(1);
echo "<br/>";
echo DoSomething::callfunctionTodo(2);

/*Output
setBackTrace -> getfunctionDo1 -> callfunctionTodo
setBackTrace -> getfunctionDo2 -> callfunctionTodo
*/

如果您查看sequence上的文档，则说是;

import { group } from '@angular/animations'; transition('in <=> out', [ group([ query('@buttonInOut', [ animateChild() ]), animate('300ms ease-out') ]) ])指定一个运行的动画步骤列表   一。（当数组作为动画传递时，默认使用序列   数据进入转型。）

序列功能可以在组中使用，也可以在a中使用   过渡，它只会继续下一个指令   内部动画步骤已经完成。

与其他动画步骤并行执行动画样式   然后看一下组动画功能。

Angular 5父母和儿童动画不能同时工作

1 个答案: