如何在angular中数据变化时添加动画？我想在左右按钮上添加动画

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 Left | Right Example

单击 向左移动 | 动画右 | Animate Neutral div 移动蓝色框

如何在angular中数据变化时添加动画？我想在左右按钮上添加动画

How to add animation when data is changes in angular?I want to add animation on left and right button

typescript

angular

angular-animations