vue动画——翻转动画（悬浮触发、点击触发）

动画效果见链接 ​​http://caibaojian.com/demo/2017/03/flip.html​​

参考资料：

​​http://caibaojian.com/3d-flip-card.html​​

​​https://www.webhek.com/post/css-flip.html​​

动画原理

1. 正面和反面是两个div，通过“子绝父相”实现完全层叠
2. 正面要在反面的上面，即正面的z-index必须大于反面的z-index
3. 反面在动画开始前，先水平翻转180度   transform: rotateY(180deg);
4. 动画过程中，为避免看到正反面的背面，需隐藏各自的背面   backface-visibility:hidden;
5. 添加过渡动画，配置动画持续时间，速度曲线 和开始时间   transition:all 1s ease-in-out 0s;
6. 动画开始后，正面翻转180度  transform: rotateY(180deg)，反面翻回到0度  transform: rotateY(0deg);
7. 悬浮触发动画，通过:hover实现；
8. 点击触发动画，通过绑定动态样式类实现；

完整演示代码

<template>
    <div>
        <div class="flip-box">
            <div :class="{'flip-front':playFlip}"
                 class="flip-item flip-item-front">
                <span>正面</span>
            </div>
            <div :class="{'flip-back':playFlip}"
                 class="flip-item flip-item-back">
                <span>反面</span>
            </div>
        </div>
        <button @click="play">点击翻转</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                playFlip: false,
            }
        },
        methods: {
            play() {
                this.playFlip = !this.playFlip
            }
        }
    }
</script>
<style scoped>
    .flip-box {
        position: relative;
        overflow: hidden;
        height: 100px;
        width: 120px;
    }

    .flip-item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 1s ease-in-out 0s;
        backface-visibility: hidden;
        box-sizing: border-box;
    }

    .flip-item-front {
        z-index: 2;
        background: red;
        color: white;
    }

    .flip-item-back {
        transform: rotateY(180deg);
        z-index: 1;
        background: green;
        color: white;
    }

    .flip-box:hover .flip-item-front {
        transform: rotateY(180deg);
    }

    .flip-box:hover .flip-item-back {
        transform: rotateY(0deg);
    }

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

    .flip-back {
        transform: rotateY(0deg);
    }
</style>