css - 使用 CSS 在单击按钮时向右和向左滑动

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

TypeScript 文件看起来像这样。

  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 并在 clicks 函数中更改此变量

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

stackblitz用丑陋的例子(但动画:))

注意:如果两个div在固定位置，我们可以做transition *=>void也花费100毫秒