在css中翻译完成后，我怎么能先翻译然后旋转？
在css中翻译完成后，我怎么能先翻译然后旋转？
提问于 2020-11-16 13:42:00
我希望thisdiv先被传送，然后旋转，但是我不知道我怎么能做到？？这是我的密码
$(document).ready(function() {
setTimeout(() => {
$(".thisdiv").css("transform", "translateX(200px) rotate(30deg)");
}, 2000);
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: start;
align-items: center;
}
.thisdiv {
width: 150px;
height: 50px;
background: #000000;
color: #ffffff;
border-radius: 10px;
text-align: center;
font-family: sans-serif;
font-size: 20px;
transform-origin: center;
transition: .5s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="thisdiv">
This is div
</div>
</div>
另外，我希望thisdiv只能在大视口(笔记本电脑或台式机)中旋转和翻译，而不是在小型视口(手机)中进行转换。在小视口中，应该是保持在中间，没有任何动画。
Stack Overflow用户
发布于 2020-11-16 14:53:30
我觉得你需要这个。首先设置页边距:0px；然后等待2000 Of(2秒)(可以调整)，然后添加类(“移动”)以移动到右侧2000 0px，然后等待(3000 Of)(当然也可以调整)，然后添加类(“旋转”)。
棘手之处是第二个函数，它将在过渡结束时触发，这意味着触发移动动画结束。
$(document).ready(function() {
setTimeout(function(){
$(".thisdiv").addClass('move');
}, 2000);
$(".thisdiv").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
setTimeout(function(){
$('.thisdiv').addClass('rotate');
}, 3000);
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: start;
align-items: center;
}
.thisdiv {
width: 150px;
height: 50px;
background: #000000;
color: #ffffff;
border-radius: 10px;
text-align: center;
font-family: sans-serif;
font-size: 20px;
transition: all 0.5s;
margin-left:0px;
}
.thisdiv.move{
margin-left:200px;
}
.thisdiv.rotate{
transform: rotate(45deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="thisdiv">
This is div
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64859122
复制相关文章
相似问题
腾讯云开发者
