Question

在Angular 2中，是否可以淡入/淡出而不是[hidden =＆＃39; 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

仅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/

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

希望它能帮助别人。

问候

肖恩

Answer 5

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

在Angular 2中，是否可以淡入/淡出而不是[hidden =＆＃39; xxx]？

5 个答案: