Question

我有一个棱角分明的页面，其设计是这样的。

值1022来自组件中处理的套接字事件，一段时间后它会不断变化。

我需要的是，当我获得任何新值时，我都会对其进行更新，但更新后应该像快闪进去一样，隐藏/显示x秒钟。我可以使用css做这种事情，但是只能发生一次，每次更新都需要它，也不想在其中使用jQuery。纯角钢，css，仅材料设计。

简而言之，我需要组件中的一个函数，该函数将获得参数秒，并且调用时，它将使令牌div隐藏/显示，缓慢隐藏/显示过去的秒数。

我的组件是

export class CounterdisplayComponent implements OnInit {

  cdID = '';
  dataSource: Tokens = {token: '', counter: '', finish: false};
  constructor(
    private socketService: CounterSocketService,
    private route: ActivatedRoute
  ) {
    const params = this.route.snapshot.params;
    this.cdID = params.id;

  }

  ngOnInit() {
    this.connectSockets();
  }

  connectSockets(): void {
    const THIS = this;
    this.socketService.initSocket( this.cdID );

    this.socketService.onMessage()
    .subscribe((message: Tokens) => {
      console.log('update ', message);
      if ( !message.finish ) {
        console.log('Got data => ', message);
        this.dataSource = message;
      } else {
        // THIS.removeToken( message );
      }
    });

  }

  removeToken( tokenObj ): void {
    this.dataSource = {token: '', counter: '', finish: false};
  }

}

onMessage订阅者不断提供数据回调，我的html文件很像这样。

<div id="counterdisplay">
    <div class="counter">
        <p>Counter  </p>
        <p class="value">
            <span *ngIf="dataSource.counter != ''" >
                    {{ dataSource.counter }}
            </span>
            <span *ngIf="dataSource.counter == ''" >
                    -----
            </span>
        </p>
    </div>
    <div class="token">
        <p>Now Serving  </p>
        <p class="value">
            <span *ngIf="dataSource.token != ''">{{ dataSource.token }}</span>
            <span *ngIf="dataSource.token == ''">-----</span>
        </p>
    </div>

  </div>

Answer 1

组件：

import { trigger, state, style, transition, animate } from '@angular/animations';

...

@Component({
  selector: 'componente',
  templateUrl: './componente.html',
  styleUrls: ['./componente.css'],
  animations: [
    trigger('esvanecerDesvanecer', [
      state('in', style({ opacity: 1 })),

      transition(':enter', [
        style({ opacity: 0 }),
        animate(400)
      ]),

      transition(':leave',
        animate(200, style({ opacity: 0 })))
    ])      
  ]
})

HTML：

<div [@esvanecerDesvanecer]="'in'">

Answer 2

setInterval(() => {
  // write pure JavaScript here that will work
 }, 2000);

尝试一下，希望它对您有用。

角度动画，隐藏/显示特定的div x秒钟

2 个答案: