我制作了入口/出口动画,它使用CSS3的transition
属性和jQuery的queue
s。
一个div
在开始时可见,另一个div
在开始时隐藏。
运行代码后,我看到退出顺利进行,但入口甚至没有发生。点击几下,div
就会消失。
我希望每次点击都播放一次动画,先退出。
$(document).ready(function() {
$(".side").click(function() {
$(this).css("transform", "rotate(90deg)");
$(this).css("opacity", "0");
$(this).css("margin-left", "50px");
$(this).delay(400).queue(function() {
$(this).hide();
var nextTarg = $($(this).attr("next-target"));
nextTarg.show();
nextTarg.css("transform", "rotate(0deg)");
nextTarg.css("opacity", "1");
nextTarg.css("margin-left", "1.5%");
});
});
});
.entrance {
transition: 0.4s;
}
.box {
height: 90px;
width: 90px;
background-color: violet;
margin: 1.5%;
}
.different.box {
background-color: blueviolet;
}
.hidden {
display: none;
}
.hidden.side {
transform: rotate(90deg);
margin-left: 50px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="side1" class="side entrance box" next-target="#side2"></div>
<div id="side2" class="different hidden side entrance box" next-target="#side1"></div>
答案 0 :(得分:0)
更改一点 jQuery 和 CSS 将帮助您实现以下目标:
$(document).ready(function() {
$(".side").click(function() {
$(this).css({
'transform': 'rotate(90deg)',
'opacity': 0,
'margin-left': '50px',
});
$(this).delay(400).queue(function() {
$(this).css({
'visibility': 'hidden'
});
var nextTarg = $($(this).attr("next-target"));
nextTarg.css({
'visibility': 'visible',
'transform': 'rotate(0deg)',
'opacity': 1,
'margin-left': '8px',
});
});
});
});
.entrance {
transition: 0.4s;
}
.parent {
position: relative;
}
.box {
height: 90px;
width: 90px;
background-color: violet;
margin: 8px;
}
.different.box {
background-color: blueviolet;
position: absolute;
left: 0px;
top: -8px;
}
.hidden {
visibility: hidden;
}
.hidden.side {
transform: rotate(90deg);
margin-left: 50px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div id="side1" class="side entrance box" next-target="#side2"></div>
<div id="side2" class="different hidden side entrance box" next-target="#side1"></div>
</div>