[游戏开发]vue3使用css原生animation实现轮播动画

简单Div如下

原理：为要transform的Div动态添加动画，交替赋予两个动画属性。具体为何如此设置可以看css要实现的功能。

<div :class="{isCardAniamtion: isShowAnimation, isCardAniamtion1: !isShowAnimation}" >
</div>

简单css 如下

原理：设置动画、每次点击下一个按钮，动画只执行一次，且保留结束状态。
v-bind绑定上一次transform的值，下一次transform的值，实现动画。

.isCardAniamtion {
    animation: cardsAnimation 1.2s linear 1;
    // 保留动画最后的状态
    animation-fill-mode: forwards;
  }
  .isCardAniamtion1 {
    animation: cardsAnimation1 1.2s linear 1;
    animation-fill-mode: forwards;
  }
  @keyframes cardsAnimation {
    0% {
      -webkit-transform: v-bind(preTransformStr);
      transform: v-bind(preTransformStr);
    }
    100% {
      -webkit-transform: v-bind(transformStr);
      transform: v-bind(transformStr);
    }
  }
  @keyframes cardsAnimation1 {
    0% {
      -webkit-transform: v-bind(preTransformStr);
      transform: v-bind(preTransformStr);
    }
    100% {
      -webkit-transform: v-bind(transformStr);
      transform: v-bind(transformStr);
    }
  }

js代码不放了。
无非根据自己需要设置 isShowAnimation = !isShowAnimation，transform的值。