css 点击显示并移动元素，再次点击移回元素并消失

点击前点击一次 先显示出来并移动到左侧再次点击再移动回来并消失整体代码如下templatediv idmyElementclassboxclickclick_me点击我/divdivclasssub:class{move-left: moveLeft, move-right: moveRight, hidden: isHidden}/div/templatescript setupimport{ref}fromvue;constmoveLeftref(false);constmoveRightref(false);constisHiddenref(true);// 初始状态为隐藏constclick_me(){if(isHidden.value!moveLeft.value!moveRight.value){// 第一次点击显示并向左移动isHidden.valuefalse;setTimeout((){moveLeft.valuetrue;},50);}elseif(moveLeft.value!moveRight.value){// 第二次点击向右移动回来moveLeft.valuefalse;moveRight.valuetrue;// 等待移动完成后消失setTimeout((){isHidden.valuetrue;moveRight.valuefalse;},500);}};/scriptstyle scoped.box{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100px;height:100px;overflow:hidden;text-align:center;background-color:pink;cursor:pointer;}.sub{position:fixed;top:100px;left:calc(50%-100px);/* 初始居中位置 */width:200px;height:200px;background-color:skyblue;transition:left0.5s ease,opacity0.3s ease,visibility0.3s ease;}.move-left{left:calc(50%-400px);/* 向左移动300px从 50%-100px 到 50%-400px */}.move-right{left:calc(50%-100px);/* 向右移动回初始居中位置 */}.hidden{opacity:0;visibility:hidden;}/style