Переход ": оставить" не запускается в приложении Angular 2+ - PullRequest
Новая
       9

Переход ": оставить" не запускается в приложении Angular 2+

0 голосов
/ 18 февраля 2019

Я попробовал простую анимацию с помощью модуля @ angular / animations, чтобы текст приветствия снова и снова появлялся и исчезал.Эффект постепенного появления (: переход перехода) работает просто отлично, но переход: выход не срабатывает.Я не могу понять, почему это не работает.Пожалуйста, помогите:)

Я пробовал оба способа определения перехода (': оставить' или '* => void'), ничего не работает. 

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css'],
  animations: [
    trigger('fade', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(4000, style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate(4000, style({ opacity: 0 }))
      ])
    ]),
    ]
})
export class WelcomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Текст приветствия должен исчезнутьчерез несколько секунд и снова исчезают через несколько секунд.Затухание в работах, затухание не.

Шаблон: 

<div class="container-fluid">
  <div class="row justify-content-center">

              <span class="font-weight-bold" @fade style="font-size:6vw;"> W E L C O M E !</span>

      </div>

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

:leave будет срабатывать, когда элемент скрыт.Пример стекаблица: https://stackblitz.com/edit/angular-bxt5w9

0 голосов
/ 18 февраля 2019

Вам необходимо определить начальный и конечный стили для перехода. 

  transition(':leave', [
    style({ opacity: 1 }),
    animate(4000, style({ opacity: 0 }))
  ])

Если вы хотите, чтобы значение было динамическим для начального стиля, тогда используйте значение *.

  transition(':leave', [
    style({ opacity: '*' }),
    animate(4000, style({ opacity: 0 }))
  ])
...