这是我要实现的目标的分割。
- 使用 CSS 转换转换框的 Y 位置,没有转换。例如翻译 Y - 200px。
- 使用过渡将框平移回原始位置。例如翻译 Y - 0px。
似乎最后一个翻译取消了第一个翻译。我只是不完全确定如何正确链接它。
请看下面我的尝试:
$(document).ready(function() {
$( 'body' ).on( 'click', '.box', function() {
$( this ).css( 'transform', 'translate(0px, 200px)' );
$( this ).addClass( 'animating' );
$( this ).css( 'transform', 'translate(0px, 0px)' );
} );
} );
.box {
transform: translate(0px,0px);
width: 50px;
height: 50px;
display: block;
background: #0f0;
}
.box.animating {
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Hello</div>
最佳答案
这应该对你有帮助。使用 show()
在两个动画之间添加一个小的超时
$(document).ready(function() {
$( 'body' ).on( 'click', '.box', function() {
$( this ).css( 'transform', 'translate(0px, 200px)' ).show().addClass( 'animating' ).css( 'transform', 'translate(0px, 0px)' );
} );
} );
.box {
transform: translate(0px,0px);
width: 50px;
height: 50px;
display: block;
background: #0f0;
}
.box.animating {
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Hello</div>
关于jquery - 如何使用 jQuery 的 .css() 触发带有过渡的连续 CSS 变换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39888284/