master

分支 (3)

管理

管理

master

wf1

test

vue3Admin
/
yu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            display: block;
        }
        .w2{
            background-color: #20a0ff;
            width: 200px;
            height: 200px;
            margin-bottom: 50px;
            animation-name: slide-in;
            animation-duration: 1s;
            animation-timing-function: ease-out;
            animation-delay: 0s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        .w3{
            background-color: #20a0ff;
            width: 200px;
            height: 200px;
            margin-bottom: 50px;
            animation-name: slide-out;
            animation-duration: 1s;
            animation-timing-function: ease-out;
            animation-delay: 0s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
         }
        @keyframes slide-in {
            0% {
                opacity: 0;
                transform: translateY(-30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);

            }
        }
        @keyframes slide-out {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(30px);
            }
        }
    </style>
</head>
<body>
    <div class="w"></div>
    <button id="btn">点我</button>
</body>
<script>
    let element = document.querySelector(".w");
    let btn = document.getElementById("btn")
    let flag = true
    btn.onclick = function () {
        console.log("点我")
        if (flag){
            element.classList.remove("w3")
            element.classList.add("w2")
            flag=!flag
        }else{
            element.classList.remove("w2")
            element.classList.add("w3")
            flag=!flag
        }

    }
</script>
</html>