GSAP：手风琴儿童动画答案

【问题标题】：GSAP: Accordion children animationGSAP：手风琴儿童动画
【发布时间】：2018-06-19 06:23:00
【问题描述】：

我一直在尝试按照 React 中的手风琴组件创建一些东西（代码笔是原版的，但演示了问题）。

笔：https://codepen.io/tim-bitanov/pen/MXrVRE

原始问题：

基本上，手风琴在展开时会改变其宽度，并且项目开始从下方进入。我的问题是这些项目并不是真正来自下方，而是来自右下角，因为容器的 left 属性由于新的宽度而发生变化。

<TransitionGroup component={null}>
    {this.props.expanded && (
    React.Children.map(this.props.children, (child) => (
        <Transition 
            timeout={500}
            onEnter={this.onSubMenuEnter}
            onExit={this.onSubMenuExit}
        >
            {child}
        </Transition>
     )))}
</TransitionGroup>

private onSubMenuEnter = (node: HTMLElement) => {
    TweenLite.set(node, { clearProps: 'all' });
    TweenLite.from(node, .5, { y: '+=50', opacity: 0 });
}

任何人都可以提出任何解决此问题的方法吗？

我尝试使用 TweenMax.ticker 获取当前父级 left 属性，但不确定如何处理它

【问题讨论】：

标签： javascript css transition gsap

【解决方案1】：

如果您仍在寻找解决方案或其他人，我叉您的笔使项目来自下方。

只要您使用相同的动画持续时间和缓动，您基本上只需要将它们从扩展父级的一半宽度转换。

请参阅下面的演示，了解从 0 扩展到 130 的容器

  TweenMax.from(items, 1, {y: '+=50'}); //not ok
  TweenMax.from(items, 1, {y: '+=50', x:'-=65'}); //ok

分叉的笔demo

【讨论】：