[英]How to Persist State Between Animations in CSS3?
I was hoping css3 animations, especially when I mark it as "forwards" would actually change my element's transforms. 我希望使用css3动画,尤其是当我将其标记为“ forward”时,实际上会改变元素的变换。 But it doesn't.
但事实并非如此。
See: http://jsfiddle.net/foreyez/3b3f6oyx/ 参见: http : //jsfiddle.net/foreyez/3b3f6oyx/
---USE CHROME BROWSER--- ---使用铬浏览器---
HTML: HTML:
<div style='position:fixed;bottom:10px'>
<button onclick='down()'>Go Down</button>
<button onclick='right()'>Go Right</button>
</div>
CSS: CSS:
@-webkit-keyframes animdownkf {
0% { }
100% { transform: translateY(100px); }
}
@-webkit-keyframes animrightkf {
0% { }
100% { transform: translateX(100px); }
}
#box {
width:50px;
height:50px;
background:black;
}
button {
height:100px;
width:100px;
}
.animdown {
-webkit-animation:1s animdownkf forwards;
}
.animright {
-webkit-animation:1s animrightkf forwards;
}
JAVASCRIPT: JAVASCRIPT:
function down() {
$('#box').removeClass('animright');
$('#box').addClass('animdown');
}
function right() {
$('#box').removeClass('animdown');
$('#box').addClass('animright');
}
What I'd like it to do is persist state, so if I clicked on "go down" it would go down, and then if I clicked on "go right" it would go right FROM THE LOCATION it is currently at. 我希望它执行的是持久状态,因此,如果单击“下降”,它将下降,然后,如果单击“下降”,它将从当前所在的位置开始。
But it doesn't seem to do this. 但这似乎没有做到。 I know css3 transitions allows to do this but I specifically want css3 animations because I need to use keyframes.
我知道css3过渡可以做到这一点,但是我特别想要css3动画,因为我需要使用关键帧。 I just want my 100% to change the actual element's style.
我只希望100%更改实际元素的样式。 Is there a way to do this?
有没有办法做到这一点?
You need jquery for that... 你需要jQuery的...
http://jsfiddle.net/swestphal/9kanuLc5/ http://jsfiddle.net/swestphal/9kanuLc5/
<script type="text/javascript">
$(document).ready(function() {
$('#moveright').click(function() {
$('#box').animate({
'marginLeft' : "+=100px" //moves right
});
});
$('#movedown').click(function() {
$('#box').animate({
'marginTop' : "+=100px" //moves down
});
});
});
</script>
<button id="moveright">Move right</button> <button id="movedown">Move Down</button><div id="box" style="position:absolute;">x</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.