vue怎么实现潜艇下潜

在Vue中实现潜艇下潜的动画效果，可以通过CSS动画、JavaScript动画库或结合Vue的响应式特性来实现。以下是几种常见的方法：

使用CSS动画

通过Vue绑定CSS类或内联样式，触发潜艇的下潜动画效果。定义一个关键帧动画，控制潜艇的垂直移动。

<template>
  <div class="submarine" :style="{ transform: `translateY(${depth}px)` }"></div>
</template>

<script>
export default {
  data() {
    return {
      depth: 0
    };
  },
  methods: {
    dive() {
      this.depth += 100; // 每次下潜100像素
    }
  }
};
</script>

<style>
.submarine {
  width: 100px;
  height: 50px;
  background-color: blue;
  transition: transform 1s ease-in-out;
}
</style>

使用GSAP动画库

GSAP是一个强大的动画库，可以更灵活地控制动画效果。通过Vue的方法触发GSAP动画。

<template>
  <div ref="submarine" class="submarine"></div>
  <button @click="dive">下潜</button>
</template>

<script>
import { gsap } from "gsap";

export default {
  methods: {
    dive() {
      gsap.to(this.$refs.submarine, {
        y: 100,
        duration: 1,
        ease: "power2.inOut"
      });
    }
  }
};
</script>

<style>
.submarine {
  width: 100px;
  height: 50px;
  background-color: blue;
}
</style>

结合Vue的响应式数据

通过动态绑定样式或类，利用Vue的响应式特性实现潜艇下潜效果。可以通过按钮或定时器触发下潜动作。

<template>
  <div 
    class="submarine" 
    :class="{ diving: isDiving }"
    @click="toggleDive"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      isDiving: false
    };
  },
  methods: {
    toggleDive() {
      this.isDiving = !this.isDiving;
    }
  }
};
</script>

<style>
.submarine {
  width: 100px;
  height: 50px;
  background-color: blue;
  transition: transform 1s ease-in-out;
}

.submarine.diving {
  transform: translateY(100px);
}
</style>

使用Vue过渡效果

Vue提供了内置的过渡组件，可以为潜艇下潜添加进入和离开的动画效果。

<template>
  <button @click="showSubmarine = !showSubmarine">下潜/上浮</button>
  <transition name="dive">
    <div v-if="showSubmarine" class="submarine"></div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showSubmarine: true
    };
  }
};
</script>

<style>
.submarine {
  width: 100px;
  height: 50px;
  background-color: blue;
}

.dive-enter-active, .dive-leave-active {
  transition: transform 1s;
}

.dive-enter, .dive-leave-to {
  transform: translateY(100px);
}
</style>

以上方法可以根据具体需求选择，CSS动画适合简单效果，GSAP适合复杂动画，Vue过渡效果适合组件级别的动画控制。