Question

每当我尝试使用jquery为CSS变换（缩放）设置动画时，它只会在第一次动画后第一次起作用，当我尝试再次为同一个元素设置动画时，它会跳到最后。

HTML

<button class="button_v1">animate v1</button>
<div class="animate_v1"></div>

SCSS

div {
    width: 200px;
    height: 200px;
    background: cyan;
    margin-top: 10px;
    margin-bottom: 10px;

    &.animate_v1 {
        -moz-transform: scale(0, 1);
        -webkit-transform: scale(0, 1);
        -o-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        transform: scale(0, 1);
    }
}

的jQuery

var toggle_v1 = false;
$('.button_v1').click(function(e) {
    if(toggle_v1) {
        $('.animate_v1').stop().animate({ scale: 100 }, { 
            step: function(now, fx) {
                $(this).css('transform', 'scale('+ (100-now)/100 +', 1)'); 
            },
            duration: 300,
        });
    }
    else {
        $('.animate_v1').stop().animate({ scale: 100 }, { 
            step: function(now, fx) {
                $(this).css('transform', 'scale('+ now/100 +', 1)'); 
            },
            duration: 300,
        });
    }
    toggle_v1 = !toggle_v1;
});

以下是一个更详细的示例，显示行为（已修复）： https://jsfiddle.net/4q76xz1u/51/

我一直在奋斗的公共汽车上，现在试着解决它4个小时，我慢慢变得无望。

接下来我该怎么办？提前谢谢。

Answer 1

我总是使用background-COLOR：cyan;我认为这不是问题，但仍然存在。

Answer 2

    var toggle_v1 = false;
$('.button_v1').click(function(e) {
    if(toggle_v1) {
        $('.animate_v1').stop().animate({ scale: 0 }, { 
            step: function(now, fx) {
                $(this).css('transform', 'scale('+ now/100 +', 1)'); 
            },
            duration: 300,
        });
    }
    else {
        $('.animate_v1').stop().animate({ scale: 100 }, { 
            step: function(now, fx) {
                $(this).css('transform', 'scale('+ now/100 +', 1)'); 
            },
            duration: 300,
        });
    }
    toggle_v1 = !toggle_v1;
});

第一个工作但第二个没有合作

Answer 3

我通常用

来做

-webkit-transition: all ease-in-out .5s, -webkit-box-shadow ease-in-out .5s;
-o-transition: all ease-in-out .5s, box-shadow ease-in-out .5s;
transition: all ease-in-out .5s, box-shadow ease-in-out .5s;

到主div，你可以改变max-widht属性，它将是动画。

例如：

<style>
.main {
    -webkit-transition: all ease-in-out .5s, -webkit-box-shadow ease-in-out .5s;
    -o-transition: all ease-in-out .5s, box-shadow ease-in-out .5s;
    transition: all ease-in-out .5s, box-shadow ease-in-out .5s;
    width: 300px;
    max-width: 20px;
    height: 200px;
    background: red;
}
.main:hover {
    max-width: 200px;
}

</style>
<div class="main"></div>

你可以用jquery或javascript来实现..

$（“。main”）。css（“max-width”，“200px”）;

例如：https://jsfiddle.net/Balaz98/fa3jbwb4/

我希望它可以解决你的问题..

jQuery - 动画变换在同一个元素上只能运行一次

3 个答案: