Question

我要求在单击时转换已经转换的元素。对于以下代码，点击时不会发生任何事情。

使用jquery-ui可以部分解决问题，因为点击它会将元素带回原位，然后缩放。

我不想使用jquery-ui，之前的旋转动画应该在点击时停止，它应该在动画停止的地方缩放元素。

<html>
    <head>
        <style type="text/css">
            .divInner{
                -webkit-animation: myOrbit 5s linear infinite;
            }

            @-webkit-keyframes myOrbit {
                 from { -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg); }
                 to   { -webkit-transform: rotate(-360deg) translateX(20px) rotate(360deg); }
            }
        </style>
        <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
        <script>
        $(".divInner").click(function() {
            $(this).css('-webkit-transform','scale(1.3)');
        });
        </script>
    </head>
    <body>
        <div class="divOuter" style="padding:20px;">
            <div class="divInner" style="border:1px solid #ddd;width:30px;">
            hello
            </div>
        </div>
    </body>
</html>

这是Fiddle链接。

Answer 1

如果只能使用一个元素，则必须在初始化第二个动画之前获取元素的变换矩阵，删除第一个动画，将属性设置为先前保存的变换矩阵，然后启动第二个动画。这是因为一个元素一次不能应用多个transform。

更好的选择是将click的效果应用于父级，因为这会缩放父级和子级。如果您不希望通过更改.divOuter

来影响页面布局，则可以使用div作为直接父级而不执行任何操作

Answer 2

以下是您的问题的问题：http://jsfiddle.net/H5g5s/22/

它涉及在当前位置停止动画，并继续第二次点击。我使用jQuery重新制作动画，以便在点击时更轻松地操作它。

最好的问候

HTML：

    <div class="divOuter" style="padding:50px;">
    <div class="divInner">
    hello
    </div>
    </div>

jQuery的：

var interval,//for interval clearance
animation,//for animation freeze
start,//to determine start angle of rotation
duration;//to determine duration of animation

/*** TRANSFORM ANIMATION FUNCTION ***/
function animateDiv(startAngle){

//Determine whether animation should continue or start from 0
startAngle ? start = startAngle :  start = 0; 
//Determine duration in case animation continues for speed to remain same
duration = 5000/360 * (360 - start);
//Start animation 
animation = $({deg: start}).animate({deg: 360}, {
    duration: duration,
    easing:'linear',
    queue:false,
    step: function(now) {

        $('.divInner').css({
            '-moz-transform':'rotate(' + -now + 'deg) translateX( 20px ) rotate(' + now   + 'deg)',
            '-webkit-transform':'rotate(' + -now + 'deg) translateX(  20px ) rotate(' + now + 'deg)',
            '-o-transform':'rotate(' + -now + 'deg) translateX( 20px ) rotate(' + now + 'deg)',
            '-ms-transform':'rotate(' + -now + 'deg) translateX( 20px ) rotate(' + now + 'deg)',
            'transform':'rotate(' + -now + 'deg) translateX( 20px ) rotate(' + now + 'deg)'
        });

    }
}); 

}
/*** Call function ***/
animateDiv();
/*** Set interval for repeating ***/
interval = setInterval(function(){
animateDiv();
},5000);

/*** On click ***/
$(".divInner").click(function() { 

/*** Determine action stop or continue ***/
//Stop
if(!$(this).hasClass('active')){

    //Stop interval
    clearInterval(interval);
    //Freeze animation
    animation.stop();
    //Get current style
    var style = $(this).attr('style');
    //Add scale
    var stylescale = style.slice(0,(style.length-1)) + ' scale(1.3)';
    //attach new style
    $(this).attr('style',stylescale);

}
//Continue
else {

   /* get rotation value*/
   var str = $(this).attr('style');
   var rotate = str.search("rotate") + 8;
   var deg = str.search("deg");
   var angle = str.slice(rotate,deg);

   /* start animation again */    
   animateDiv(angle);
   /* sset interval again */
   interval = setInterval(function(){
       animateDiv();
   },5000);  

}

//Toggle class to determine action next time;
$(this).toggleClass('active');

});

CSS：

.divInner{
position:relative;
border:1px solid #ddd;
width:30px;
-moz-transform: rotate(0deg) translateX(20px) rotate(0deg);
-webkit-transform: rotate(0deg) translateX(20px) rotate(0deg);
-o-transform: rotate(0deg) translateX(20px) rotate(0deg);
-ms-transform: rotate(0deg) translateX(20px) rotate(0deg);
transform: rotate(0deg) translateX(20px) rotate(0deg);
cursor:pointer;
}

Answer 3

尝试

HTML

<div class="divOuter" style="padding:20px;position:relative;left:200px;">
<div class="divInner" style="border:1px solid #ddd;width:35px;">
hello
</div>
</div>

JS

$(".divOuter").click(function() {
    $(".divInner", this)[0].style.WebkitAnimation = "paused";
    $(this).css('-webkit-transform','scale(1.3)');
});

jsfiddle http://jsfiddle.net/guest271314/wRKL3/

Answer 4

检查JSFiddle link：

$(".divOuter").click(function() { 
    $(this).toggleClass("pause");  
     $("#divInner").toggleClass("scale");
});

我已将webkit动画附加到OuterDiv，并将比例转换为InnerDiv。这样我就可以停止动画制作de scalation。由于某些未知原因，第一次点击不会停止它应该的div，但下一次点击工作正常。

使用jQuery进行CSS转换

4 个答案: