所以,我这里有这个草图:
$('button').on('click', function(){
$('.block').toggleClass('hide');
});
div {
height: 300px;
width: 300px;
background-color: red;
animation: anim .2s;
}
.hide {
display: none !important;
}
@keyframes anim {
from {opacity: 0; transform: translateX(-100%);}
to {opacity: 1; transform: translateX(0);}}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">press me</button>
<div class="block hide"></div>
它按我想要的方式工作,除了它在第二次按时隐藏之外。 因此,我需要使 block 在向内移动时具有动画效果,但向后移动(因此它会移开)。
我应该如何正确地做到这一点?
最佳答案
如果你想在删除类时使动画反转,使用 transition
会更容易在 CSS 中为 transform
制作动画和opacity
特性。然后你就可以免费获得该行为:
$('button').on('click', function() {
$('.block').toggleClass('hide');
});
div {
height: 300px;
width: 300px;
background-color: red;
transform: translateX(0);
transition: opacity 0.2s, transform 0.2s;
opacity: 1;
}
div.hide {
transform: translateX(-100%);
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">press me</button>
<div class="block hide"></div>
关于jquery - 如何让动画倒退,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53560106/