jquery - 如何在第二次点击时反转css动画
问题描述
我创建了一个绘制和动画三行的动画。
- 顶部,从右到左
- 左,从上到下
- 底部,从左到右。
内容包装器是display: none
,当点击#btn
它时,它会显示并且线条动画。我希望第二次点击线动画反转并且内容包装器应该回到display: none
.
我尝试了下面的代码,但没有奏效。有人可以给我一些建议吗?
$('#btn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.content-wrapper').css({
'display': 'none'
});
} else {
$('.content-wrapper').css({
'display': 'block'
});
}
$(this).data("clicks", !clicks);
});
.content-wrapper {
display: none;
width: 68.5%;
height: 60%;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%);
}
.l-top,
.l-left,
.l-bottom {
position: absolute;
background: transparent;
-webkit-animation-duration: .4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-direction: alternate;
}
.l-top {
top: 0;
right: 0;
height: 1px;
-webkit-animation-name: l-top;
-webkit-animation-delay: 0s;
}
.l-left {
top: 0;
left: 0;
width: 1px;
-webkit-animation-name: l-left;
-webkit-animation-delay: .4s;
}
.l-bottom {
left: 0;
bottom: 0;
height: 1px;
-webkit-animation-name: l-bottom;
-webkit-animation-delay: .8s;
}
@-webkit-keyframes l-top {
0% {
width: 0;
background: red;
}
100% {
width: 100%;
background: red;
}
}
@-webkit-keyframes l-left {
0% {
height: 0;
background: red;
}
100% {
height: 100%;
background: red;
}
}
@-webkit-keyframes l-bottom {
0% {
width: 0;
background: red;
}
100% {
width: 100%;
background: red;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btn">btn</btn>
<div class="content-wrapper">
<span class="l-top"></span>
<span class="l-left"></span>
<span class="l-bottom"></span>
<p>content</p>
</div>
解决方案
使用过渡而不是动画怎么样?我必须为内容包装器的宽度本身设置动画,所以它并没有真正隐藏,而只是 0 宽度,但这实际上是相同的。
$('#btn').click(function() {
$('.content-wrapper').toggleClass('open');
});
.content-wrapper {
display: block;
width: 0;
height: 60%;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%);
background: transparent;
overflow: hidden;
transition: width .1s 1.2s;
}
.content-wrapper.open {
width: 68.5%;
transition: width .1s;
}
.l-top,
.l-left,
.l-bottom {
position: absolute;
background: red;
}
.content-wrapper .l-top {
top: 0;
right: 0;
width: 0;
height: 1px;
transition: width .4s .8s;
}
.content-wrapper.open .l-top {
width: 100%;
transition: width .4s;
}
.content-wrapper .l-left {
top: 0;
left: 0;
width: 1px;
height: 0;
transition: height .4s .4s;
}
.content-wrapper.open .l-left {
height: 100%;
transition: height .4s .4s;
}
.content-wrapper .l-bottom {
width: 0;
left: 0;
bottom: 0;
height: 1px;
transition: width .4s;
}
.content-wrapper.open .l-bottom {
width: 100%;
transition: width .4s .8s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btn">btn</div>
<div class="content-wrapper">
<span class="l-top"></span>
<span class="l-left"></span>
<span class="l-bottom"></span>
<p>content</p>
</div>
推荐阅读
- javascript - 响应式导航事件监听器
- rust - 如何实现“中间件”功能的动态列表?
- c++ - 在共享库中使用 tcmalloc
- sql - 如何在 RANK 语句中使用条件
- c# - 如何防止MySql Injection in dynamic where?
- vhdl - 进程敏感度列表 vhdl
- python - 将python代码拆分为单独的文件
- javascript - 如何映射 ImageURLs 数组并显示每个?
- oracle-apex - Oracle Apex 19 - 经典报表分页仅获取 15 行
- amazon-web-services - AWS CloudFormation:堆栈需要相互引用