css transition 如何为同一个组件分开控制不同的动画

要为同一个组件分开控制不同的动画，你可以使用CSS类来实现。

首先，在你的组件中，为每个不同的动画创建一个CSS类。例如，如果你有一个叫做"fade-in"的动画和一个叫做"slide-in"的动画，你可以在组件中创建这两个类。

<template>
  <div class="my-component">
    <!-- your component content -->
  </div>
</template>

<style>
.my-component {
  /* default styles */
}

.fade-in {
  opacity: 0;
  transition: opacity 0.5s;
}

.slide-in {
  transform: translateX(-100%);
  transition: transform 0.5s;
}
</style>

然后，在你的组件中使用条件渲染或动态绑定来为每个动画添加或移除相应的类。

<template>
  <div class="my-component" :class="{ 'fade-in': fadeIn, 'slide-in': slideIn }">
    <!-- your component content -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      fadeIn: true,
      slideIn: false
    }
  },
  methods: {
    toggleAnimation() {
      this.fadeIn = !this.fadeIn;
      this.slideIn = !this.slideIn;
    }
  }
}
</script>

在上面的示例中，假设你有两个按钮，一个用于控制"fade-in"动画，另一个用于控制"slide-in"动画。当你点击"fade-in"按钮时，"fade-in"动画将被添加到组件中，而"slide-in"动画将被移除。当你点击"slide-in"按钮时，"slide-in"动画将被添加到组件中，而"fade-in"动画将被移除。

<template>
  <div>
    <button @click="toggleFadeIn">Toggle Fade-In Animation</button>
    <button @click="toggleSlideIn">Toggle Slide-In Animation</button>

    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  },
  methods: {
    toggleFadeIn() {
      this.$refs.myComponent.toggleAnimation();
    },
    toggleSlideIn() {
      this.$refs.myComponent.toggleAnimation();
    }
  }
}
</script>

在上面的示例中，我们使用了$refs来获取到MyComponent组件的实例，并调用了toggleAnimation方法来切换动画。你也可以根据你的需求来设计不同的操作方式