请问在vue文件里面没用transition标签，怎么用动画结束的回调函数

Question

<template>
  <div class="page">
      <img src="../../../static/pic/bg1.png" alt="" :class="bg">
      
      
      
  </div>
</template>
<script>
export default {
  data() {
    return {
      change: true,
      bg: 'bg1'
    };
  },
  mounted() {},
  methods: {
      
  }
};
</script>
<style scoped>
.page {
  display: flex;
  flex-direction: column;
}
.header {
  height: 142rpx;
  width: 100vw;
  /* background-color: red; */
  box-shadow: 0 2rpx 150rpx 0 rgba(207, 207, 207, 0.7);
}
.contain {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  text-align: center;
  padding-top: 51rpx;
  /* background: blue; */
}

.text1 {
  color: white;
  margin-top: 62rpx;
  font-size: 40rpx;
  letter-spacing: 37.5rpx;
}
.text2 {
  margin-top: 1rpx;
  letter-spacing: 14.6rpx;
  font-size: 25rpx;
}
.text3 {
  color: white;
  margin-top: 294rpx;
  font-size: 60rpx;
}
.down {
  margin-top: 211.4rpx;
  height: 126rpx;
  width: 126rpx;
  border-radius: 126rpx;
  border: 6rpx solid white;
  box-shadow: 0 20rpx 40rpx 0 rgba(0, 0, 0, 0.86);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(155, 155, 155, 0.65);
}
.downPic {
  height: 70rpx;
  width: 70rpx;
}
.text4 {
  margin-top: 179rpx;
  color: white;
  font-size: 35rpx;
}
@keyframes move1 {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -150vw;
  }
}
@keyframes move2 {
  0% {
    margin-left: -150vw;
  }
  100% {
    margin-left: 0;
  }
}
.bg1 {
  position: absolute;
  z-index: -1;
  height: 100vh;
  width: 250vw;
  /* left: -100vw; */
  animation: move1 5s ease .5s forwards;
}
.bg2 {
  position: absolute;
  z-index: -1;
  height: 100vh;
  width: 250vw;
  /* left: -100vw; */
  animation: move2 5s ease .5s forwards;
}
</style>

Answer 1

明确的说：不用 transition 标签，不监听 js 提供的 transitionEnd 事件是没法用动画结束的回调函数的。

你可以使用 setTimemout 做简单的延时处理，但是会有误差。所以少年有 transition 标签你为何不用呢。。