#transform #transition 通过类名实现文字动画过渡

代码
<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 200px;
             300px;
            height: 300px;


            background: red;
            transition: width .5s,transform .5s,top .5s,height .5s;
        }

        .customStyle {

            top: 200px;
             300px;
            height: 100px;
            transform: translateX(500px);
        }
    </style>
</head>

<body>

    <div id="test">
        <h1>我是中国人</h1>
    </div>

    <button onClick="trigger()">点击</button>
    <button onClick="triggeroff()">移出</button>
    <script>
        function trigger() {

            document.getElementById("test").classList.add("customStyle")
        }
        function triggeroff() {

            document.getElementById("test").classList.remove("customStyle")
        }
    </script>
</body>

</html>