vue3 + css动画实现元素翻转效果

1. 先看一下效果

vue3 + css动画实现元素翻转效果

 <div :class="{ draw: draw }">
      <div class="borderBox">
           <!-- 这里是第一个盒子 -->
      </div>

       <!-- 这里是中间的交换按钮 -->
       <div class="centerIconBox">
             <div class="centerIcon" @click="exchange"></div>
        </div>

        <div class="borderBox2">
             <!-- 这里是第二个盒子 -->
        </div>
</div>

重要代码：

1. 通过:class="{ draw: draw }"控制动画翻转效果

2. 给中间的交换按钮添加事件@click="exchange"

3. 给draw类添加css动画效果

const draw = ref(false)   //定义变量用来控制动画显示或隐藏
const exchange = () => {
    draw.value = true
    setTimeout(() => {
        draw.value = false
    }, 1000)   //动画在一秒执行完毕后隐藏
    list.value = list.value.reverse()   //翻转数组，这是我用来切换两个盒子内的变量值
}

 .draw {
        animation: flip 1s linear;
        transform-style: preserve-3d;
        animation-fill-mode: forwards;
    }

    @keyframes flip {
        0% {
            -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }

        50% {
            -webkit-transform: rotateX(180deg);
            transform: rotateX(100deg);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }

        100% {
            -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
    }