Question

我第一次使用CSSTransitionGroup，并且试图找出一种方法，当通过transform: translate单击选项卡的右侧或左侧时，可以对这些框进行动画处理

如果我只对所有动画使用一个固定的方向，它们就可以正常工作：

        .crossfade-enter {
          transform: translateX(100%}
          );
          opacity: 0;
        }

        .crossfade-enter-active {
          transform: translateX(0px);
          transition: all ${this.state.duration}ms ease-in-out;
          opacity: 1;
        }

        .crossfade-leave {
          transform: translateX(0px);
          opacity: 1;
        }

        .crossfade-leave-active {
          transform: translateX(-100%}
          );
          transition: all ${this.state.duration}ms ease-in-out;
          opacity: 0;
        }

https://duaw26jehqd4r.cloudfront.net/items/1C1o240c3b1k0Y1r313O/Screen%20Recording%202018-10-22%20at%2011.19%20PM.gif?v=f59eb8bd

但是，我的目标是使动画根据单击的选项卡的方向移动，因此，我将单击的选项卡与活动标签进行比较，并使用此信息在样式标签中设置方向：

        .crossfade-enter {
          transform: translateX(${this.state.direction === 'left-to-right' ? '100%' : '-100%'});
          opacity: 0;
        }

        .crossfade-enter-active {
          transform: translateX(0px);
          transition: all ${this.state.duration}ms ease-in-out;
          opacity: 1;
        }

        .crossfade-leave {
          transform: translateX(0px);
          opacity: 1;
        }

        .crossfade-leave-active {
          transform: translateX(${this.state.direction === 'left-to-right' ? '-100%' : '100%'});
          transition: all ${this.state.duration}ms ease-in-out;
          opacity: 0;

但是，由于某种原因，当我这样做时，每次改变方向时，第一次进行动画的尝试都会中断。它仅适用于同一方向的第二次通话：

https://duaw26jehqd4r.cloudfront.net/items/43372X0P1w0m2m1m3l2F/Screen%20Recording%202018-10-22%20at%2011.22%20PM.gif?v=dd9de306

在Chrome上进行检查时，我发现每次都正确地应用了这些类，但是由于某些原因，相应的 styles 仅在第二次应用该类时才计算。

我想念什么？

CSSTransitionGroup和基于状态的类样式

0 个答案: