Question

告诉我我在做什么错。我正在尝试实现边栏外观的动画，但是通过单击按钮，该面板会立即显示，再次按下时，它会等待2秒钟，然后立即消失。如何顺利进行？

我的TypeScript：

import {Component, OnInit} from '@angular/core';
import {animate, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.css'],
  animations: [
    trigger('showPanel', [
      transition('void <=> *', [
        animate(2000)
      ])
    ])
  ]
})
export class NavigationBarComponent implements OnInit {
  isShow = false;

  constructor() {
  }

  ngOnInit() {
  }

  onShowPanel() {
    this.isShow = !this.isShow;
  }
}

html

<div class="time-panel">
  <div class="content" *ngIf='isShow' @showPanel></div>
  <!--Visible button-->
  <div class="time-button" 
       title="Панель навигации по архиву" 
       (click)="onShowPanel()">
    <i class="material-icons">gamepad</i>
  </div>
</div>

css

.time-panel {
  position: fixed;
  top: 177px;
  right: 0;
  z-index: 100;
}

.time-panel .content {
  /*position: relative;*/
  width: 250px;
  height: 335px;
  padding: 15px;
  border: 1px solid #0062cc;
  background: #ffffff;
}

.time-panel .time-button {
  position: absolute;
  right: 100%;
  top: 0;
  background: #0062cc;
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
  cursor: pointer;
}

.time-panel .time-button i {
  color: white;
  padding: 5px;
  font-size: 32px;
}

.btn-control {
  width: 100%;
}

如果按钮在侧边栏外部，则动画有效，但我希望按钮与侧边栏一起移动。

解决这个问题有什么建议？

侧边栏外观动画处理不正确

0 个答案: