jQuery

Question

每当我尝试使用 jquery 对 CSS transform(scale) 进行动画处理时，它只在第一次工作，在第一个动画之后，当我再次尝试对同一元素进行动画处理时，它只会跳到结束。

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

我总是使用背景颜色：青色；我不认为这是问题所在，但仍然如此。

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，你可以改变最大宽度属性，它会是动画的。

例如：

<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 - 动画变换仅对同一元素起作用一次

jQuery - Animating transform works only one time on the same element

animation

jquery-animate