Как работает анимация Angular 2.0 для TypeScript "(альфа)?

Я очень новичок в сценарии Angular. Я только начал изучать Angular 2.0 для TypeScript, и мне было интересно, как анимация (как в простом HTML с jQuery) работает в Angular 2.0

На домашней странице Angular 2.0 (angular.io > ) вы можете увидеть, что есть способ сделать анимацию в "Angular 2.0 для TypeScript".

В моем исследовании я нашел что-то вроде этого: http://www.angular-dev.com/angular-connect-slides/#/26/0/

Но я думаю, что это обычный код JavaScript. И я не уверен, что ngAnimate 2.0 - это то, что я ищу.

К сожалению, я больше не могу найти информацию об этом.

Что я хочу сделать, очень просто:

Когда я нажимаю только в простом контейнере div, я хочу, чтобы появился еще один div-контейнер (который в начале невидим).

В jQuery это будет примерно так: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

Но я хочу, это анимация в TypeScript. Вы знаете, как я достигаю этой цели?

Спасибо за ваши ответы заранее!

ИЗМЕНИТЬ Извините, я забыл упомянуть, что именно я хочу. Я хочу использовать toggle, но что-то вроде Windows 10:

Когда вы нажмете "Windows + A", на правой стороне появится боковая панель. Именно то, что я хочу с анимацией на веб-сайте, когда вы нажимаете на div-контейнер, а не просто выглядите и исчезаете.

Я думаю, что код jQuery будет что-то вроде этого (только для появления с задержкой)

$("divA").click(function() {
    $("divB").toggle(1000);
});

ОТВЕТЫ

Ответ 1

Вы можете использовать CSS, или AnimationBuilder

Для способа CSS вы можете проверить этот пример из своего репо, что делает именно то, что вы ищете.

С помощью AnimationBuilder вы можете моделировать такое же поведение, как это.

Сначала вы настраиваете шаблон, в котором будет удерживаться кнопка и div для переключения

@Component({
  // Setting up some styles
  template: `
    <div animate-box #box="ab"  style="height:0; width:50%; overflow: hidden;">Some content</div>
    <button (click)="box.toggle(visible = !visible)">Animate</button>
  `,
  directives : [AnimateBox] // See class below
})

Затем вы создаете директиву, которая будет обрабатывать анимацию

@Directive({
  selector : '[animate-box]',
  exportAs : 'ab' // Necessary, we export it and we can get its 'toggle' method in the template
})
class AnimateBox {
  constructor(private _ab: AnimationBuilder, private _e: ElementRef) {}

  toggle(isVisible: boolean = false) {
    let animation = this._ab.css();
    animation
      .setDuration(1000); // Duration in ms

    // If is not visible, we make it slide down
    if(!isVisible) {

      animation
        // Set initial styles
        .setFromStyles({height: '0', width: '50%', overflow: 'hidden'})
        // Set styles that will be added when the animation ends
        .setToStyles({height: '300px'})
    } 
    // If is visible we make it slide up
    else {
      animation
        .setFromStyles({height: '300px', width: '50%'})
        .setToStyles({height: '0'})
    }

    // We start the animation in the element, in this case the div
    animation.start(this._e.nativeElement);
  }
}

Ссылка

Примечания

Это временный API, новый, называемый ngAnimate 2.0, пока недоступен. Но вы можете проверить, что нового в @matsko говорят в AngularConnect - ngAnimate 2.0.

Здесь plnkr с репродукцией.

Надеюсь, это поможет.

Ответ 2

Для вашей простой "анимации" вам нужно только ng-if:

<div (click)="showDiv2 = !showDiv2">toggle</div>
<div *ng-if="showDiv2">div 2</div>

BTW, Angular 2 анимация пока недоступна. Документация по анимации приземлилась.