Ошибки синхронизации анимации Angular Router

Недавно я обновил свое приложение Angular до версии 4.0, чтобы воспользоваться преимуществами анимации между маршрутами.

Ниже моя функция анимации:

export function routerTransition() {
    return trigger('routerAnimations', [
        transition('home => development, design => home', [
            query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
            query(':leave', style({ zIndex: 100 })),
            query(':enter', style({ transform: 'translateX(100%)', opacity:1 })),
            group([
                query(':leave', group([
                    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(-100%)', opacity:0 }))
                ])),
                query(':enter', group([
                    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(0%)' }))
                ]))
            ])
        ]),
        transition('home => design, development => home', [
            query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
            query(':leave', style({ zIndex: 100 })),
            query(':enter', style({ transform: 'translateX(-100%)', opacity:1 })),
            group([
                query(':leave', group([
                    animate('0.8s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(100%)', opacity:0 }))
                ])),
                query(':enter', group([
                    animate('0.8s cubic-bezier(0.68, -0.75, 0.265, 1.55)', style({ transform: 'translateX(0%)' }))
                ]))
            ])
        ])
    ])
}

По какой-то причине, когда я изменяю время одного перехода так, чтобы оно совпадало с другим (т.е. меняю «0,7 с» на «0,8 с»), я получаю следующую ошибку:

The CSS property "transform" that exists between the times of "0ms" and "800ms" is also being animated in a parallel animation between the times of "0ms" and "800ms"

Две анимации не должны перекрываться, так как stateChangeExpr отличается для каждого перехода.

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


angular angular-animations angular-router
person adamjesmith    schedule 14.06.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я действительно смог заставить вашу анимацию работать. Чтобы исправить их, я:

  1. Удалены вложенные группы (у вас есть группы в группах, которые определяют отдельные анимации)
  2. Я явно определил начальное состояние для каждого свойства, которое вы анимировали. Если вы анимировали translateX, я устанавливаю начальное значение в верхней части анимации для этого элемента.
  3. Похоже, ваши начальные значения непрозрачности были установлены для неправильных элементов (т. е. вы инициируете его как 1 на :enter, а затем анимируете до 0 на :leave.

Вот пересмотренные переходы, которые работают для меня:

Первый:

query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ transform: 'translateX(0%)', opacity:1 })),
query(':enter', style({ transform: 'translateX(100%)' })),

group([
  query(':leave',
    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
    style({ transform: 'translateX(-100%)', opacity:0 }))
  ),
  query(':enter',
    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
    style({ transform: 'translateX(0%)' }))
  )
])

Второй:

query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ transform: 'translateX(0%)', opacity:1 })),
query(':enter', style({ transform: 'translateX(-100%)' })),

group([
  query(':leave',
    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
    style({ transform: 'translateX(100%)', opacity:0 }))
  ),
  query(':enter',
    animate('0.7s cubic-bezier(0.68, -0.75, 0.265, 1.55)',
    style({ transform: 'translateX(0%)' }))
  )
])
person SpaceFozzy    schedule 16.06.2017

arrow_upward
0
arrow_downward

У меня такая же проблема, это похоже на баг. Изменение порядка переходов исправило это для меня.

person user2957238    schedule 15.06.2017