form slide left and right
備份一下自己寫的範例程式碼
<html>
<head>
<title>同一表單的上一步、下一步 JS效果</title>
<style>
form {
/*容器水平置中，本文為了Demo用，實務上或許不用*/
margin-left: auto;
margin-right: auto;
/*內容三個區塊水平排列&置中*/
display: flex;
justify-content: center; /*有設沒設都沒差*/
/*容器大小*/
width: 300px; /*視需求，有可能不必設width，由step內容物撐開width*/
height: 300px; /*最好三個step區塊的內容高度都一樣*/
transition: 350ms;/*如果須靠javascript改變容器高度就加上此轉場效果*/
}
/*預設各區塊要轉場效果*/
#step1, #step2, #step3 {
transition: 350ms; /*轉場效果*/
}
.my-opacity-0{
opacity: 0; /*透明&不佔用堆疊空間*/
width: 0;
/* display:none; 這個不好做動畫*/
}
/*區塊顏色*/
#step1 {
width:100%;/*由於會被容器的display:flex壓縮width，所以width要給100%*/
border: 1px solid red;/*border為了本文Demo顯眼區塊，實務上非必要*/
}
#step2 {
border: 1px solid blue; /*border為了本文Demo顯眼區塊，實務上非必要*/
}
#step3 {
border: 1px solid black; /*border為了本文Demo顯眼區塊，實務上非必要*/
}
</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/
2024-04-13 追加
實務上我碰到三個step的內容高度都不一致，導致每次的下一步、上一步都必須使用 javascript 配合step的內容物來改變容器的高度↓
form {
/*容器大小*/
height: 300px; /*←若三個step區塊的內容高度都不一樣時，由於是flex排版，要用JS改變容器的height*/
transition: 350ms; /*如須使用javascript改變容器高度就加上此轉場效果*/
}附上部份JS片段程式碼，大概類似以下的感覺。※附上RWD網頁的 javascript 處理
$("#btnGoStep2,#btnGoStep1,#btnGoStep3,#btnGoStep2_by3").click(function () {
$("#step1,#step2,#step3").css({ opacity: 0, width: 0 });//全panel變透明&不佔畫面空間
//手機版
if (window.matchMedia("(max-width: 767px)").matches) {
window.scrollTo({ top: 560, behavior: 'smooth' });
} else {
//PC版
window.scrollTo({ top: 160, behavior: 'smooth' });
}
});//end click event
//下一步
$("#btnGoStep2").click(function () {
//為了適應RWD，每次重新取得容器的width
let stepWidth = $("form").width();//容器的width
$("#step1").css({ transform: "translateX(" + (0 - stepWidth) + "px)" });
$("#step2").css({ opacity: 1, width: "100%" });
//手機版
if (window.matchMedia("(max-width: 767px)").matches) {
//改變容器高度
$("form").css({ height: "1150px" });
} else {
//PC版
//改變容器高度
$("form").css({ height: "780px" });
}
});
// 上一步
$("#btnGoStep1").click(function () {
$("#step1").css({ transform: "translateX(0px)", opacity: 1, width: "100%" });
//手機版
if (window.matchMedia("(max-width: 767px)").matches) {
//改變容器高度
$("form").css({ height: "680px" });
} else {
//PC版
//改變容器高度
$("form").css({ height: "580px" });
}
});//end click event
