当数据发生变化时，如何添加动画?我想在左右按钮上添加动画

Question

当我单击右键和左键时，数据应随动画提供，但对我不起作用

我在Angular中添加了一些空隙动画，并在页面刷新时在我的HTML元素动画上触发了动画，但是当我单击右或左键时，它不起作用

animations:[
trigger('divstate',[
  state('in',style({
    opacity:1,
    transform:'translateX(0)'
  })),
  transition('void => *',[
    style({
      opacity:0,
      transform:'translateX(-100px)'
    }),
    animate(300)
  ]),
]),

]

<div class="box-2" [@divstate]>
  <div class="left-arrow">
    <a class="cursor_pointer" (click)="previousData()">
      <img src="assets/left_arrow.png" alt="">
    </a>
  </div>
  <div class="container-1">
    <div class="grid-1" [@divstate]>
      <div class="item-1 font_p">
        <h3 class="color_saffron" [@divstate]>{{cardData[currentPosition].section1}}</h3>
        <br>
        <p [@divstate]>{{cardData[currentPosition].section1Text}}
        </p>
        <br>
        <h3 class="color_saffron" [@divstate]>{{cardData[currentPosition].section2}}</h3><br>
        <p [@divstate]>{{cardData[currentPosition].section2Text}}</p>
      </div>
      <div class="item-2" [@divstate]>
        <img src="{{cardData[currentPosition].image1}}" alt="">
      </div>
    </div>
    <br><br>
    <div class="grid-2" [@divstate]>
      <div class="item-2">
        <img src="{{cardData[currentPosition].image2}}" alt="">
      </div>
      <div class="item-1 font_p" [@divstate]>
        <h3 class="color_saffron">{{cardData[currentPosition].section3}}</h3>
        <br>
        <p>{{cardData[currentPosition].section3Text}}</p>
      </div>
    </div>
  </div>
  <div class="right-arrow">
    <a class="cursor_pointer" (click)="onAnimate()" (click)="nextData()">
      <img src="assets/right_arrow.png" alt="">
    </a>
  </div>
</div>

每当我单击左或右键时，数据应随动画带来的数据，当页面刷新

Answer 1

我在这里为您创建了一个跑步的简单示例：

Angular Animation左|正确的示例

单击动画左 |动画右 |动画中性 div移动蓝色框