В Angular 2 возможно ли fadeIn/fadeout вместо [hidden = 'xxx]?

Ответ 1

Жаль, что я немного опаздываю на вечеринку на этом.

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

Сначала в файле компонента css:

.show{
opacity: 1 !important;
}
.step{
opacity: 0;
transition: .5s ease-in-out all;
}

Далее, условно добавьте свой класс к элементу.

<div [class.show]="!booleanFromComponentClass" class="step">
  <h4>All of these elements will be faded out using a CSS3 opacity transition.</h4>
  <div>
     this element will fade out also when the booleanFromComponentClass variable is false
  </div>
</div>

Вы также можете воспользоваться любым свойством, включая относительное положение элемента и анимацию слайда страницы.

Если Angular2 когда-либо реализует анимацию, я могу гарантировать, что они используют анимацию CSS3 путем условного добавления и вычитания классов.

Ответ 2

Если кто-нибудь придет сюда, чтобы найти угловое решение, вот и все,

В HTML-шаблон

<a (click)="toggle()">toggle state</a>

<div [@visibilityChanged]="visiblityState" >    
   some content
</div>

В компоненте

    //other imports..
    import { trigger, state, transition, style, animate } from '@angular/animations';

    @Component({
      selector: 'some-selector',
      templateUrl: 'my-template.html',
      animations: [
        trigger('visibilityChanged', [
          state('shown', style({ opacity: 1 })),
          state('hidden', style({ opacity: 0 })),
          transition('shown => hidden', animate('600ms')),
          transition('hidden => shown', animate('300ms')),
        ])
      ]
    })
    export class MyComponent {
      visiblityState = 'hidden';
      toggle() {
        if (this.visiblityState === 'hidden')
          this.visiblityState = 'shown';
        else
          this.visiblityState = 'hidden';
      }
    }

Ответ 3

Css только решение. Добавьте класс 'step' и [class.show] = "fadeInIfTrue", чтобы заблокировать исчезновение.

CSS:

.step {
  display: none;
  opacity: 0;

  &.show {
    display: block;
    transform: scale(1);
    opacity: 1;
    animation: anim .7s ease-in-out;
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transition: .7s ease-in-out all;
  }
  100% {
    opacity: 1 !important;
  }
}

источник - https://jdsteinbach.com/css/snippet-animate-display-transform/

Ответ 4

после некоторого поиска найденного ответа вам нужно использовать интерфейс адаптера браузера в ng2

import {Component, ViewContainerRef} from 'angular2/core';
import {BrowserDomAdapter} from 'angular2/platform/browser';

export class Filemenu {


   private visible:boolean;
    el:any;
    wrapper:any;
    bar:any;
    viewContainer:ViewContainerRef;
    dom = new BrowserDomAdapter();

    constructor(viewContainer:ViewContainerRef) {
        this.viewContainer = viewContainer;
        this.el = viewContainer.element.nativeElement;
        let bar = this.dom.getElementsByTagName(this.el, 'div')[0];
        $(bar).fadeOut(3000, () => {
            //notify ng2 of the changes so we comply with the framework
             this.dom.setStyle(this.el, 'opacity', '0');
        });
         ...

и насколько здорово это, мы все еще можем использовать jQuery, пока мы не забываем уведомлять рамки наших изменений...

надеюсь, что это поможет другим.

рассматривает

Шон

Ответ 5

 this.userName.valueChanges.debounceTime(100).subscribe(
        (value:string) => {
            console.log('name changed, notified via observable: ', value);
        }
    );