I would like to ask if the transition tag is not used in the vue file, how to use the callback function at the end of the animation?

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

Mar.04,2021

to be clear: it is impossible to use a callback function that ends with animation without using the transition tag and listening to the transitionEnd event provided by js.

you can use setTimemout to do simple delay processing, but there will be errors. So teenagers have transition tags. Why don't you use them.

Menu