CSSTransitionGroup и стиль класса на основе состояния - PullRequest
Новая
       54

CSSTransitionGroup и стиль класса на основе состояния

0 голосов
/ 23 октября 2018

Я впервые использую 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, я обнаружил, что классы применяются правильно каждый раз, но по какой-то причине соответствующие стили вычисляются только при втором применении класса.

Чего мне не хватает?

...