单击按钮即可使jQuery动画化表格
我在同一页面上有三套表格，一次只显示一个表格。可以通过表单的每个下一步按钮浏览表单。我想将滑动动画/过渡集成到如下形式中。
我想要一个使用CSS或jQuery的解决方案。我尝试了使用CSS的方法，但是没有用。
示例动画
$(document).ready(function() {
$(".form-set form:not(:first-child)").each(function(e) {
if (e != 0)
$(this).hide();
});
$(".next").click(function() {
if ($(".form-set form:visible").next().length != 0)
$(".form-set form:visible").next().show().prev().hide();
else {
$(".form-set form:visible").hide();
$(".form-set form:first").show();
}
return false;
});
});<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-set">
<form>
<h4>
Form Set 1
</h4>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary next">Next Step</button>
</form>
<form style="display:none">
<h4>
Form Set 2
</h4>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary next">Next Step</button>
</form>
<form style="display:none">
<h4>
Form Set 3
</h4>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary next">Next Step</button>
</form>
</div>
</div>
</div>
</div>
2 个答案:
答案 0 :(得分：2)
您可以根据需要使用普通css和animations和@keyframes来实现。
对于以下示例，我使用了moveInRight动画。
您的css应该采用这种方式
.form-1,.form-2,.form-3{
animation: moveInRight .5s ease-out;
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px)
}
80% {
transform: translateX(-10px)
}
100% {
opacity: 1;
transform: translateX(0px)
}
}
这是有效的代码段
$(document).ready(function() {
$(".form-set form:not(:first-child)").each(function(e) {
if (e != 0)
$(this).hide();
});
$(".next").click(function() {
if ($(".form-set form:visible").next().length != 0)
$(".form-set form:visible").next().show().prev().hide();
else {
$(".form-set form:visible").hide();
$(".form-set form:first").show();
}
return false;
});
});.form-1,.form-2,.form-3{
animation: moveInRight .5s ease-out;
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px)
}
80% {
transform: translateX(-10px)
}
100% {
opacity: 1;
transform: translateX(0px)
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-set">
<form class="form-1">
<h4>
Form Set 1
</h4>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary next">Next Step</button>
</form>
<form class="form-2" style="display:none">
<h4>
Form Set 2
</h4>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary next">Next Step</button>
</form>
<form class="form-3" style="display:none">
<h4>
Form Set 3
</h4>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary next">Next Step</button>
</form>
</div>
</div>
</div>
</div>
这是工作中的fiddle
答案 1 :(得分：0)
您还可以使用CSS转换和普通的JavaScript。
// Get the elements
const red = document.getElementById('red'),
green = document.getElementById('green'),
blue = document.getElementById('blue'),
prev = document.getElementsByClassName('prev-button'),
next = document.getElementsByClassName('next-button');
let visible = 1;
Array.from(next).forEach(button => {
button.addEventListener('click', () => {
if (visible === 1) {
red.style.transform = 'translateX(-100%)';
blue.style.transform = 'translateX(0)';
} else if (visible === 2) {
blue.style.transform = 'translateX(-100%)';
green.style.transform = 'translateX(0)';
}
visible ++;
});
});
Array.from(prev).forEach(button => {
button.addEventListener('click', () => {
if (visible === 3) {
green.style.transform = 'translateX(100%)';
blue.style.transform = 'translateX(0)';
} else if (visible === 2) {
blue.style.transform = 'translateX(100%)';
red.style.transform = 'translateX(0)';
}
visible --;
});
});html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
#container {
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.elem {
transition: all 1s;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#blue, #green {
transform: translateX(100%);
}
#red {
background-image: linear-gradient(to top, #f43b47 0%, #453a94 100%);
}
#blue {
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
#green {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}<div id="container">
<div class="elem" id="red">
<button class="next-button">Next →</button>
</div>
<div class="elem" id="blue">
<button class="prev-button">← Back</button>
<button class="next-button">Next →</button>
</div>
<div class="elem" id="green">
<button class="prev-button">← Back</button>
</div>
</div>
更改translate的值，可以使元素从不同的方向进行动画制作。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？