Angular 2 «слайд в анимации» маршрутизируемого компонента

скажем, у меня есть 2 маршрутизируемых компонента и две Routerlinks в фиксированной навигационной панели для их маршрутизации. Я хочу, чтобы они скользили справа, когда я нажимаю на ссылки Router.

Я не хочу компенсировать компонент с помощью css и использовать функцию тайм-аута, чтобы изменить класс css, чтобы он мог скользить (например, с помощью ngStyle или ngClass).

Есть ли более элегантные способы добиться этого в Angular 2?

Спасибо!

 Mark22 февр. 2018 г., 21:23
поэтому ответы в основном показывают анимацию со встроенным CSS в TypeScript. Есть ли примеры использования ngClass, чтобы вы могли применять стили CSS вместо эффектов ввода / вывода или ввода / вывода?
 Sasxa19 июн. 2016 г., 18:18
В RC2 появился новый API анимации, вы можете в этом разобраться.Смотрите этот пример, Я еще не пробовал с роутером, но выглядит весело (:

Ответы на вопрос(2)

Вы можете сослаться наОфициальные документы Angular 2 Animate.

Вы также можете проверить этоPlunker Я сделал для простой витрины, используя новый маршрутизатор v3

Имейте в виду, что я изо всех сил пытаюсь выяснить, как на самом деле иметь переходы выход / выход / пустота, когда срабатывающий элемент собирается быть уничтоженным из вида.

Я открыл другую ветку вAngular 2 Animate - отсутствует видимый эффект перехода «* => void» при изменении маршрутов / компонентов. попытаться выяснить, как заставить маршрутизатор обратить внимание на время анимации / перехода.

@Component({
  selector: 'home',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <div @flyInOut="'active'" class="radibre">
  </div>
  `,
  styles: ['.radibre { width: 200px; height: 100px; background: red; }'],
  animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({transform: 'translateX(100%)'}))
      ])
    ])
  ]
})

export class Home {
  constructor() { }
}
@Component({
  selector: 'page',
  template: `
  <div @testingBottom="'active'" class="page"></div>`,
  styles: ['.page { width: 300px; height: 50px; background: green; }'],
  animations: [
    trigger('testingBottom', [
      state('active', style({transform: 'scale(1)'})),
      transition('void => *', [
        style({transform: 'scale(0)'}),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({transform: 'scale(0)'}))
      ])
    ])
  ]
})
 msanford12 окт. 2016 г., 15:04
Дружеское замечание, что в настоящее время Plunker не оживляет переход (возможно, из-за обновлений angular2 отrc_ встабильный?)
Решение Вопроса

. Это отличается от запуска анимации при отображении компонента, поскольку она позволяет одновременно анимировать входящий / выходящий компонент для плавного перехода и позволяет изменять переход в зависимости от того, какой компонент прибывает или уходит. Это означает, что вы можете выполнять сложные переходы, например, вставлять компонент справа, если вы углубляетесь в контент, и вставлять его слева, если вы вводите его с помощью кнопки «назад» из другого компонента.

Во-первых, аннотируйте розетку вашего маршрутизатора следующим образом (например,app.component.html):

<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
</div>

РеализоватьprepareRouteTransition(outlet) функция в определении соответствующего компонента (например,app.component.js).

prepareRouteTransition(outlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || null;
}

Определите ваши анимации (например,app.component.js):

  const slideLeft = [
    query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' }), {optional:true}),
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' }), {optional:true}),
    group([
      query(':leave', group([
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(100%,0,0)' })), // y: '-100%'
      ]), {optional:true}),
      query(':enter', group([
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })),
      ]), {optional:true})
    ])
  ]

  const slideRight = [
    query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'}), {optional:true}),
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'}), {optional:true}),

    group([
      query(':leave', group([
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(-100%,0,0)' })), // y: '-100%'
      ]), {optional:true}),
      query(':enter', group([
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })),
      ]), {optional:true})
    ])
  ]

Добавьте метаданные анимации в определения вашего маршрута (например,app.routing.ts):

const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    data: {
      animation: {
        value: 'products',
      }
    }
  },
  {
    path: 'products/:id',
    component: ProductDetailComponent,
    data: {
       animation: {
        value: 'product-detail',
      }
    }
  }

Наконец, зарегистрируйте триггер анимации routerAnimations в своем компоненте с анимациями и метаданными маршрута, которые вы определили (например,app.component.js):

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('routerAnimations', [
      transition('products => product-detail', slideRight),
      transition('product-detail => products', slideLeft),
    ])
  ]
})

Не забудьте заполнить API веб-анимации для старых браузеров

Матиас Нимела больше говорит об анимации маршрута на ng-conf здесь (с демонстрацией):https://youtu.be/Oh9wj-1p2BM?t=12m21s

Его код презентации:https://github.com/matsko/ng4-animations-preview

 Mark03 февр. 2018 г., 04:01
Нужно быть в стороне, чтобы сделать это без жесткого кодирования значений CSS в TypeScript, как, например, прослушивание 'animationEnd' в элементе. Я понимаю, что animate может помочь связать кучу анимаций, таких как GSAP, но я подумал, что мы больше не делаем CSS-анимации в JavaScript.
 David Alsh24 авг. 2017 г., 06:27
Я не могу построить свой проект Angular после этого. Похоже, что проект GitHub не может собрать вообще из коробки
 user105993920 июл. 2018 г., 09:42
Просто быстрое замечание, чтоproducts используется повторно по умолчанию. Вы должны предоставитьRouteReuseStrategy который говорит Angular создать несколькоproduct тогда вы можете оживить их. Однако остальная часть анимации так же загадочна, как вы говорите
 Evgeny Bobkin01 дек. 2017 г., 14:13
Но как анимировать переход между «products / id1» и «products / id2»? Не похоже, что для этого случая определен переход.
 David Alsh10 сент. 2017 г., 16:24
Эй, спасибо за ответ, это то, что происходит на моем компьютере с последним угловым CLI и узлом, если я запускаюng build --aot --prod. i.imgur.com/kp8mrVo.jpg
 dale17 сент. 2017 г., 17:29
Это не будет работать для сборок --prod. Есть исправление, но нам придется ждать релиза:github.com/angular/angular/issues/17467
 SpaceFozzy25 авг. 2017 г., 03:47
Хм, только что смог клонировать, собрать и запустить проект github из коробки на двух разных ноутбуках. Если у вас все еще есть проблемы, можете ли вы создать новый вопрос и опубликовать код или опубликовать свой проект? Хотел бы помочь.

Ваш ответ на вопрос