在使用Renderer2创建的元素中进行动画制作

Question

我使用的是Angular 4.2.5，我正在寻找一种在使用Renderer2创建的元素中进行动画制作的方法。以前，Renderer有一个功能.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); 
    } 
} 

而且

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

元素被创建并添加到时我将鼠标悬停div的div的HTML，但我怎么能使其出现与动画？通过向生成的div添加一个类可能是可能的。但不能太快，否则动画不会启动。我正在寻找一种方法来处理@angular/animations。

Answer 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) { 
    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); 
      } 
     }