form slide left and right

备份一下自己写的范例程式码

<html>
<head>
    <title>同一表单的上一步、下一步 JS效果</title>
    <style>
        form {
            /*容器水平置中*/
            margin-left:auto;
            margin-right:auto;
            /*内容水平排列&置中*/
            display: flex;
            justify-content: center;/*有设没设都没差*/
            
            /*容器大小*/
            width: 300px;
            height: 300px;
        }
        /*预设各区块要转场效果*/
        #step1, #step2, #step3 {
            
            transition: 350ms; /*转场效果*/
        }
            
            .my-opacity-0{
                opacity: 0; /*透明&不佔用堆叠空间*/
                width: 0;
               /* display:none; 这个不好做动画*/
            }

        
        /*区块颜色*/
        #step1 {
            width:100%;
            border: 1px solid red;
        }

        #step2 {
            border: 1px solid blue;
        }

        #step3 {
            border: 1px solid black;
        }
    </style>
</head>
<body>

    <form>
        <div id="step1">
            <div>Step1</div>
            <button type="button" id="btnGoStep2">下一步</button>
        </div>
        <div id="step2" class="my-opacity-0">
            <div>Step2 </div>
            <button type="button" id="btnGoStep1">上一步</button>
            <button type="button" id="btnGoStep3">下一步</button>
        </div>
        <div id="step3" class="my-opacity-0">
            <div>Step3</div>
            <button type="button" id="btnGoStep2_by3">上一步</button>
            <!--
              <button type="submit">提交表单</button>
            -->
        </div>
    </form>

    <!--引用jQuery函式库-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {



            /*panel步骤左右滑动效果*/
         
            $("#btnGoStep2,#btnGoStep1,#btnGoStep3,#btnGoStep2_by3").click(function () {
                $("#step1,#step2,#step3").css({ opacity: 0, width: 0 });//全panel变透明&不佔画面空间
            });
            //下一步
            $("#btnGoStep2").click(function () { 
                //为了适应RWD，每次重新取得容器的width
                let stepWidth = $("form").width();//容器的width
                console.log(stepWidth);//Debug
                $("#step1").css({ transform: "translateX(" + (0 - stepWidth) + "px)" });
                $("#step2").css({ opacity: 1, width: "100%" });

            });
            //下一步
            $("#btnGoStep3").click(function () { 
                //为了适应RWD，每次重新取得容器的width
                let stepWidth = $("form").width();//容器的width
                console.log(stepWidth);//Debug
                $("#step2").css({ transform: "translateX(" + (0 - stepWidth) + "px)" });
                $("#step3").css({  opacity: 1, width: "100%" });
               

            });
            // 上一步
            $("#btnGoStep1").click(function () { 
                $("#step1").css({ transform: "translateX(0px)", opacity: 1, width: "100%" });
                
                 
            });
            // 上一步
            $("#btnGoStep2_by3").click(function () { 
                $("#step2").css({ transform: "translateX(0px)", opacity: 1, width: "100%" });
            });

        });
    </script>
</body>
</html>

线上 Live Demo：https://jsfiddle.net/ShadowKao/6wvjm3yo/