uniapp 字幕横竖交替翻转效果

在 UniApp 中实现字幕横竖交替翻转的效果，你可以使用 Vue.js 的动画和 CSS3 的变换属性来实现。以下是一个简单的步骤说明：

1. 首先，确保你的字幕是用 Vue 组件渲染的，比如一个 `v-for` 循环遍历字幕列表。

2. 创建一个 CSS 类，例如 `.flip-text`，用于定义字幕的样式和动画：

.flip-text {
  position: absolute;
  transform-origin: center bottom;
  transition: transform 0.5s ease;
}

.flip-text.vertical {
  transform: rotateY(180deg);
}

.flip-text.horizontal {
  transform: rotateX(180deg);
}

3. 在 Vue 组件中，为每个字幕创建一个切换横竖状态的方法，例如 `toggleFlipAxis`，并绑定到一个触发事件（比如点击）：

<template>
  <div>
    <span v-for="subtitle in subtitles" :key="subtitle.id" :class="{ flipText: isFlipped(subtitle) }">
      {{ subtitle.text }}
      <button @click="toggleFlipAxis(subtitle)">Flip</button>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subtitles: [
        // ...
      ],
    };
  },
  methods: {
    toggleFlipAxis(subtitle) {
      const currentAxis = subtitle.isHorizontal ? 'horizontal' : 'vertical';
      subtitle.isHorizontal = !subtitle.isHorizontal; // 倒换横竖状态
      this.$refs[`subtitle-${subtitle.id}`].classList.toggle(currentAxis);
    },
    isFlipped(subtitle) {
      return subtitle.isHorizontal;
    },
  },
};
</script>

4. 在模板中，为每个字幕添加一个唯一的引用，这样 Vue 可以在 JavaScript 中找到对应的元素：

<span ref="subtitle-{{ subtitle.id }}">{{ subtitle.text }}</span>

现在，点击每个字幕，它会在横竖方向之间交替翻转。记得根据实际需求调整动画时间和方向切换逻辑。