在Angular 2中,是否可以淡入/淡出而不是[hidden ='xxx]？

Question

在Angular 2中,是否可以淡入/淡出而不是[hidden ='xxx]？

我有片段

<div  [hidden]="visible">

并希望它在明显变化时淡出......

TX

肖恩

Answer 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动画.

Answer 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';
      }
    }

Answer 3

经过一番挖掘找到答案后，您需要使用 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...

希望它对其他人有帮助。

问候

肖恩