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

和HTML

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

当我悬停div时，该元素已创建并添加到div，但如何使其显示动画？可以通过向生成的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); } }

Answer 2

您可以通过在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;
}

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

2 个答案: