css水平移动动画

<template>
  <div id="app">
    <div class="container">
      <div :class="{'moving': isMoving}" class="box">
        <button @click="moveBox">Move</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMoving: false
    }
  },
  methods: {
    moveBox() {
      this.isMoving = true;
    }
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
}
.box {
  position: absolute;
  width: 300px;
  height: 800px;
  background-color: lightblue;
  transition: transform 2s ease-out;// 动画效果持续2秒，开始快，结束慢
}
.box.moving {
  transform: translateX(calc(100vw + 300px));// 水平位置增加300px
}
button {
  position: absolute;
  top: 20px;
  left: 20px;
}
</style>