<template> <view class="header"> <view class="box"> <view class="box_show"> </view> </view> <button @click="btn">点击过渡移动</button> </view> </template> <script> export default { data() { return { }; }, methods:{ btn(){ } } } </script> <style lang="scss"> .header { width: 100vw; height: 100vh; .box { width: 590rpx; height: 800rpx; margin: 60prx auto; .box_show { width: 560rpx; height: 560rpx; margin: 20rpx auto; background: hotpink; } } } </style> 点击btn实现box_show 在box从上到下过渡动画移动200rpx,下次点击时先隐藏box_show，1秒后再显示触发动画过渡移动

要实现点击btn后，让box_show在box中从上到下过渡动画移动200rpx，并且下次点击时先隐藏box_show，1秒后再显示触发动画过渡移动，你可以按照以下步骤进行操作：

1. 在data中添加一个变量showBox来控制box_show的显示和隐藏状态，初始值为true。

data() {
  return {
    showBox: true
  };
},

2. 在btn方法中添加逻辑，控制box_show的移动和显示隐藏。

methods: {
  btn() {
    if (this.showBox) {
      this.showBox = false; // 隐藏box_show

      setTimeout(() => {
        this.showBox = true; // 1秒后显示box_show
      }, 1000);
    }
  }
}

3. 在模板中使用v-if指令根据showBox的值来控制box_show的显示和隐藏。

<template>
  <view class="header">
    <view class="box">
      <view class="box_show" v-if="showBox">

      </view>
    </view>
    <button @click="btn">点击过渡移动</button>
  </view>
</template>

4. 在box_show的样式中添加过渡效果。

<style lang="scss">
  .header {
    width: 100vw;
    height: 100vh;

    .box {
      width: 590rpx;
      height: 800rpx;
      margin: 60prx auto;

      .box_show {
        width: 560rpx;
        height: 560rpx;
        margin: 20rpx auto;
        background: hotpink;
        transition: transform 0.5s; // 添加过渡效果
      }
    }
  }
</style>

5. 在btn方法中添加动画效果，通过改变box_show的transform属性来实现移动效果。

methods: {
  btn() {
    if (this.showBox) {
      this.showBox = false; // 隐藏box_show

      setTimeout(() => {
        this.showBox = true; // 1秒后显示box_show
        setTimeout(() => {
          const boxShowElement = document.querySelector('.box_show');
          boxShowElement.style.transform = 'translateY(200rpx)'; // 移动200rpx
        }, 0);
      }, 1000);
    }
  }
}

这样，点击btn后，box_show会在box中从上到下过渡动画移动200rpx，然后隐藏，并在1秒后再次显示触发动画过渡移动。