vue 翻转卡片的实现

需求描述：元素实现翻转的同时，还要自动翻转。

实现效果：

 

代码：

CSS：

.container {
            perspective: 1000; /* 其子元素会获得透视效果，而不是元素本身。 */
        }

        /* 鼠标悬浮时，翻转 */
        /* .container:hover .card,.container.hover .card{  
            transform:rotateY(180deg); 
        } */

        /* 手动控制翻转 */
        .container.flip .card {
            transform: rotateY(180deg);
        }

        .container,
        .front,
        .back {
            width: 320px;
            height: 480px;
        }

        .card {
            transition: 0.6s;
            transform-style: preserve-3d; /* 让其有3d效果 */
            position: relative;
        }

        .front,
        .back {
            backface-visibility: hidden; /*翻转隐藏背面 */
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .front {
            z-index: 2;
            background-color: cadetblue;
        }

        .back {
            background-color: bisque;
            transform: rotateY(180deg);
        }

        .back div {
            width: 100%;
        }

HTML:

 <div id="mycard" class="container" @mouseEnter="mouserEneter" @mouseLeave="mouserLeave">
      <div class="card">
           <div class="front">
               <div>已选中：</div>
               <div>大王</div>
           </div>
           <div class="back">
               <div>未选中：</div>
               <div>纸牌A</div>
               <div>纸牌B</div>
               <div>纸牌C</div>
           </div>
       </div>
  </div>

JS:

var vm = new Vue({
        el: '#app',
        data: {
            timeID: null,
        },
        mounted() {
            this.timeID = setInterval(() => {
                document.querySelector("#mycard").classList.toggle("flip");
            }, 3000)
        },
        methods: {
            // 鼠标移进来，停止翻转
            mouserEneter(e) {
                // 1、移除类 .flip
                // 2、清除自动轮询     
                document.querySelector("#mycard").classList.remove("flip");
                if (this.timeID) {
                    clearInterval(this.timeID);
                }
            },
            // 鼠标移出，继续翻转
            mouserLeave(e) {
                // 1、添加类 .flip
                // 2、添加轮询
                this.timeID = setInterval(() => {
                    document.querySelector("#mycard").classList.toggle("flip");
                }, 3000)
            }
        }
    })

以上方法和代码参考：https://www.webhek.com/post/css-flip/  这篇文档，这篇代码简单易懂，要给这位大佬点个赞。

其他参考文档：https://juejin.cn/post/6969483139701800974