Question

单击箭头按钮后，它应该向右滑动并显示数组中的其他元素。由于我是这个平台的新手，因此我们将不胜感激。谢谢和提前问候。 html文件看起来像这样。

<div class="showContainer" *ngIf="windowWidth <= 629">
    <div
      class="col-100 tabStyleShow row"
      *ngFor="let tabData of tabArray; let i = index"
      [ngClass]="{ completed: i <= navCount }"
    >
      <span class="col-xs-2" *ngIf="navCount > 0 && navCount <= 4"
        ><img
          src="assets/img/digital/arrow_right.svg"
          class="tab-arrow-left-show"
          (click)="slideTabPrevious()"
      /></span>
      <span class="col-xs-8 icon-title">
        <span><img [src]="tabData.active" class="tab-icon-show"/></span>
        <span
          ><div class="tab-title-show">{{ tabData.title }}</div></span
        >
      </span>
      <span class="col-xs-2" *ngIf="navCount < 4" (click)="slideTabNext()"
        ><img
          src="assets/img/digital/arrow_right.svg"
          class="tab-arrow-show"
          [ngClass]="{ arrowOpacity: i <= navCount }"
      /></span>
    </div>
  </div>

样式文件看起来像这样。

.showContainer {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 8px;
  width: 100%;
  float: left;
  display: -webkit-inline-box;
  overflow: scroll;
  text-align: center;
  .col-100 {
    width: 100%;
  }
  .tabStyleShow {
    background-color: #f9f9f9;
    display: flex;
    .icon-title {
      display: inline-flex;
      margin-left: 70px;
      .tab-icon-show {
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .tab-title-show {
        padding-top: 18px;
        font-size: 18px;
      }
    }
    .tab-arrow-show {
      padding-top: 22px;
      padding-bottom: 20px;
    }
    .tab-arrow-left-show {
      padding-top: 20px;
      padding-bottom: 20px;
      transform: rotate(180deg);
    }
  }
  .tabStyleShow.completed {
    background-color: #ffffff;
    .tab-icon-show {
    }
    .tab-title-show {
      color: #383838;
    }
    .tab-arrow-show.arrowOpacity {
      opacity: 1;
    }
  }
}

打字稿文件看起来像这样。

  slideTabPrevious() {
    if (this.navCount > 4) {
      this.form = !this.form;
    }
    this.navCount = this.navCount - 1;
  }
  slideTabNext() {
    console.log(this.quesArray);
    this.navCount = this.navCount + 1;
    if (this.navCount > 4) {
      this.form = !this.form;
    }
  }

Answer 1

最后，我有时间制作一些动画。关键是要有两个div，但是每次都显示一个。一种动画花费1000毫秒，另一种动画花费0

我们的.html就像

<div>
    <button *ngIf="navCount" (click)="slideTabPrevious()"><</button>
  <div *ngIf="toogle" style="display:inline" [@fadeInOut]> 
    {{tabData[navCount].img}} - {{tabData[navCount].title}}
  </div>
  <div *ngIf="!toogle" style="display:inline" [@fadeInOut]> 
    {{tabData[navCount].img}} - {{tabData[navCount].title}}
  </div>
  <button *ngIf="navCount<tabData.length-1" (click)="slideTabNext()">></button>
</div>

输出组件中，我们添加了“动画”

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('fadeInOut', [
      state('void', style({
        opacity: 0
      })),
      transition('void => *', animate(1000)),
      transition('* => void', animate(0)),
    ]),
  ]
})

最后，我们有了一个变量toogle，并在点击功能中更改了该变量

  toogle: boolean = false;
  slideTabPrevious() {
    this.navCount--;
    this.toogle = !this.toogle;
  }
  slideTabNext() {
    this.navCount++;
    this.toogle = !this.toogle;
  }

带有丑陋示例的stackblitz（但动画：））

注意：如果两个div处于固定位置，我们可以进行过渡* => void也要花费100毫秒

使用CSS在按钮单击上左右滑动

1 个答案: