css 3のアニメーション特性
22924 ワード
css 3のトランジションアニメーションでは、他の問題が発生することがあります.
たとえば、cssプロパティを変更してからアニメーションの移行を行いたい場合、実際にはcssプロパティとアニメーションが同期して行われていることがわかります.これはコンパイル段階で確定したはずです.
したがってsettimeoutで非同期処理を行うしかない.
$("#aaaa")[0].style["transform"] ="translate3d(-100%,0,0) scale(1)"; $("#aaaa")[0].style["transition"] = "all 0.23s ease-out";
たとえば、cssプロパティを変更してからアニメーションの移行を行いたい場合、実際にはcssプロパティとアニメーションが同期して行われていることがわかります.これはコンパイル段階で確定したはずです.
したがってsettimeoutで非同期処理を行うしかない.
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<style type="text/css">
.stage {
width: 300px;
height: 300px;
float: left;
margin: 15px;
position: relative;
background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container img {
position: absolute;
}
.container img:nth-child(1){
z-index: 1;
opacity: .6;
}
.s1 img:nth-child(2){
z-index: 2;
-webkit-transform: translate3d(30px,30px,200px);
-moz-transform: translate3d(30px,30px,200px);
-ms-transform: translate3d(30px,30px,200px);
-o-transform: translate3d(30px,30px,200px);
transform: translate3d(30px,30px,-200px);
}
.s2 img:nth-child(2){
z-index: 2;
-webkit-transform: translate3d(30px,30px,-200px);
-moz-transform: translate3d(30px,30px,-200px);
-ms-transform: translate3d(30px,30px,-200px);
-o-transform: translate3d(30px,30px,-200px);
transform: translate3d(30px,30px,-200px);
}
</style>
<script src="jquery.min.js"></script>
<script>
function c(){
$("#aaaa").css("left", "-10px");
}
function a(){
$("#aaaa")[0].style["transform"] = "translate3d(-100%,0,0) scale(1)";
//for(var s = +new Date(); s + 200 > +new Date();){}
$("#aaaa")[0].style["transition"] = "all 0.23s ease-out";
// for(var s = +new Date(); s + 200 > +new Date();){}
//for(var s = +new Date(); s + 30000 > +new Date();){}
//$("#aaaa")[0].style["WebkitTransform"] = "translate3d(-0%,0%,0) scale(1)";
console.log(111111)
}
function b(){
$("#aaaa")[0].style["WebkitTransform"] = "translate3d(-0%,0%,0) scale(1)";
}
</script>
</head>
<body>
<div class="stage s1">
<div class="container">
<img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" id="aaaa" />
<img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
</div>
</div>
<div class="stage s2">
<div class="container">
<img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
<img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
</div>
</div>
</body>
</html>$("#aaaa")[0].style["transform"] ="translate3d(-100%,0,0) scale(1)"; $("#aaaa")[0].style["transition"] = "all 0.23s ease-out";