1
resposta

Desativar ou ativar as animações on/off

Da forma que foi feito, queria alguma ideia de como habilitar e desabilitar as animações, centralizar em um serviço de preferencia do usuário achei complicado de mais para uma coisa on/off, vindo do servidor ou escolha do cliente, no estilo do modo noturno, para animação teria quer ser obj {} cada propriedade uma animação, mostrando que está on ou off, achei que está ficando complicado

No final do curso angular técnicas animação interfaces atraentes

import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'

Vou estudar mais no saiba mais

1 resposta

Olá, Israel, tudo bem? Espero que sim!

Entendo que você esteja procurando uma maneira de habilitar e desabilitar as animações no Angular de forma mais simples. Uma opção seria criar um serviço para gerenciar as configurações de animação do usuário.

Você pode criar um serviço chamado "AnimationService" que armazena o estado das animações (ligado ou desligado) e disponibiliza métodos para alterar esse estado. Por exemplo:

import { Injectable } from '@angular/core';

@Injectable()
export class AnimationService {
  private animationEnabled: boolean = true;

  constructor() { }

  public enableAnimation(): void {
    this.animationEnabled = true;
  }

  public disableAnimation(): void {
    this.animationEnabled = false;
  }

  public isAnimationEnabled(): boolean {
    return this.animationEnabled;
  }
}

Dessa forma, você pode injetar esse serviço em qualquer componente que precise controlar as animações e utilizar os métodos enableAnimation e disableAnimation para habilitar e desabilitar as animações, respectivamente.

Por exemplo, suponha que você tenha um componente chamado "MeuComponente" que utiliza animações. Você pode injetar o serviço AnimationService nesse componente e utilizá-lo da seguinte maneira:

import { Component } from '@angular/core';
import { AnimationService } from 'caminho/para/animation.service';

@Component({
  selector: 'meu-componente',
  templateUrl: './meu-componente.component.html',
  styleUrls: ['./meu-componente.component.css']
})
export class MeuComponenteComponent {
  constructor(private animationService: AnimationService) { }

  public toggleAnimation(): void {
    if (this.animationService.isAnimationEnabled()) {
      this.animationService.disableAnimation();
    } else {
      this.animationService.enableAnimation();
    }
  }
}

No exemplo acima, o método toggleAnimation verifica se as animações estão habilitadas ou desabilitadas e alterna o estado usando os métodos do serviço AnimationService.

Espero ter ajudado!

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!