Angular 在使用Renderer2创建的元素中设置动画

我正在使用Angular 4.2.5，并且我正在寻找一种方法来在使用

Renderer2

创建的元素中设置动画。以前，使用

渲染器

，有一个函数

.animate（）

，但现在不是这样。假设我有以下指令：

import { Directive, Input, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[text-content]'
})
export class TextContentDirective {
  @Input('text-content') textContent: string;
  box: ElementRef;

  constructor(private element: ElementRef, private renderer: Renderer2 ) { }

  @HostListener('mouseenter', ['$event.target'])
  mouseEnter(target) {
    this.box = this.renderer.createElement('div');
    let span = this.renderer.createElement('span');
    let content = this.renderer.createText(this.textContent);
    this.renderer.appendChild(span, content);
    this.renderer.appendChild(this.box, span);
    this.renderer.appendChild(this.element.nativeElement, this.box);
  }
}

还有HTML

<div [text-content]="Hello World">Hover me</div>

将鼠标悬停在我身上

---

当我悬停

div

时，元素被创建并添加到

div

中，但是如何使其显示在动画中？可以通过将类添加到生成的

div

中。但是不能做得太快，否则动画不会启动。我正在寻找一种方法来使用

@angular/animations

我没有测试这个，但我只是想给你一个尝试的想法

import { Directive, Input, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[text-content]'
})
export class TextContentDirective {
  @Input('text-content') textContent: string;
  box: ElementRef;

  constructor(private element: ElementRef, private renderer: Renderer2 ) {
    this.box = this.renderer.createElement('div');
    // Added
    this.renderer.setStyle(this.box,"opacity",0);
    this.renderer.setStyle(this.box,"transition","opacity 2s");
    //
    let span = this.renderer.createElement('span');
    let content = this.renderer.createText(this.textContent);
    this.renderer.appendChild(span, content);
    this.renderer.appendChild(this.box, span);
    this.renderer.appendChild(this.element.nativeElement, this.box);
 }

  @HostListener('mouseenter', ['$event.target'])
  mouseEnter(target) {
    this.renderer.setStyle(this.box,"opacity",1);
  }
}

编辑 试试这个

     import { Directive, Input, ElementRef, Renderer2, HostListener } from '@angular/core';

        @Directive({
          selector: '[text-content]'
        })
        export class TextContentDirective {
          @Input('text-content') textContent: string;
          box: ElementRef;

          constructor(private element: ElementRef, private renderer: Renderer2 ) {

         }

          @HostListener('mouseenter', ['$event.target'])
          mouseEnter(target) {
            this.box = this.renderer.createElement('div');
            // Added
            this.renderer.setStyle(this.box,"opacity",0);
            this.renderer.setStyle(this.box,"transition","opacity 2s");
            //
            let span = this.renderer.createElement('span');
            let content = this.renderer.createText(this.textContent);
            this.renderer.appendChild(span, content);
            this.renderer.appendChild(this.box, span);
            this.renderer.appendChild(this.element.nativeElement, this.box);
            this.renderer.setStyle(this.box,"opacity",1);
          }
        }

---

您可以通过在setTimeout中添加样式类来完成此操作：

// animate this.box element
this.box = this.renderer.createElement('div');
this.renderer.addClass(this.box, 'my-class');
setTimeout(() => this.renderer.addClass(this.box, 'my-class-visible'));
...

styles.css：

/* Animate height */
.my-class {
  max-height: 0;
  transition: all 1000ms;
}
.my-class-visible {
  max-height: 100px;
}

---

你试过官方文件吗。现在动画不在渲染器2中，因为Angular团队引入了一个独立于平台的层。@ShanilFernando更多的是为组件设置动画，而不是为元素设置动画。您是否尝试使用CSS3转换？请参阅本文-一直到底部-使用AnimationBuilder的8.0编程动画。这是使用动画API-->完成此操作的唯一方法，类似的东西应该可以工作，但我正在寻找一种在创建动画时为其设置动画的方法。现在，您首先创建所有框，然后在悬停时仅向其中添加/删除类。“现在，您首先创建所有框，然后在悬停时仅向其中添加/删除类”是的，我故意这样做是为了获得更多性能增益。想一想，如果内容相同，为什么每次他悬停时都需要创建相同的内容？当然，我知道在这种情况下，在init处渲染内容可能是更好的方法。但是，在某些情况下，您可能不希望在page init中呈现一个元素/一组元素