uniapp+Vue3(＜script setup lang=“ts“＞)模拟12306城市左右切换动画效果

效果图：

代码： 

<template>
  <view class="container">
    <view class="left" :class="{ sliding: isSliding }" @animationend="resetSliding">{
  
  { placeA }}</view>
    <view class="center" @click="swapPlaces">
      切换
    </view>
    <view class="right" :class="{ sliding: isSliding }" @animationend="resetSliding">{
  
  { placeB }}</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 声明地名变量
const placeA = ref('呼和浩特');
const placeB = ref('北京');
const isSliding = ref(false); // 控制滑动动画的标志

// 交换地名函数
const swapPlaces = () => {
  if (isSliding.value) return; // 如果正在滑动，则不执行交换

  isSliding.value = true; // 开始滑动动画

  // 临时存储地名
  const temp = placeA.value;
  placeA.value = placeB.value;
  placeB.value = temp;

  // 触发动画（这里使用transition，你可以根据需要替换为CSS动画）
  setTimeout(() => {
    // 动画结束后重置滑动标志
    isSliding.value = false;
  }, 500); // 假设动画时长为500ms，根据实际情况调整
};

// 重置滑动类（动画结束后调用）
const resetSliding = () => {
  if (!isSliding.value) return;
  isSliding.value = false; // 动画结束后重置滑动标志（防止多次触发）
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100vh; /* 或其他你需要的容器高度 */
  padding: 0 20px;
  box-sizing: border-box;
}

.left, .right {
  flex: 1;
  text-align: center; /* 初始状态居中对齐，动画过程中会改变 */
  transition: transform 0.5s ease; /* 动画效果 */
}

.left.sliding {
  text-align: right; /* 动画过程中右对齐 */
  transform: translateX(100%); /* 向右滑动到屏幕外 */
}

.right.sliding {
  text-align: left; /* 动画过程中左对齐 */
  transform: translateX(-100%); /* 向左滑动到屏幕外 */
}

.center {
  width: 50px; /* 或其他你需要的宽度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 100%;
  height: auto;
}
</style>