jQuery - 动画变换只能在同一个元素上工作一次答案

【问题标题】：jQuery - Animating transform works only one time on the same elementjQuery - 动画变换只能在同一个元素上工作一次
【发布时间】：2016-08-09 19:59:02
【问题描述】：

每当我尝试使用 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 个小时，我正慢慢变得绝望。

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

【问题讨论】：

“它只在第一次工作，在第一个动画之后，当我尝试再次对其进行动画处理时，它只会跳到最后。” 无法重现。 javascript, css 在问题返回预期结果
是的，它可以工作，但前提是你为它制作一次动画。如果你为同一个元素设置两次动画，它将无法工作（你可以在 jsfiddle 链接上尝试）。
每次点击 jsfiddle 的按钮时，相同的元素都会被动画化，这里

标签： jquery animation jquery-animate

【解决方案1】：

    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;
});

让第一个工作，但第二个不合作

【讨论】：

我看到你在那里做了什么，它现在正在工作，非常感谢。

【解决方案2】：

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

【讨论】：

【解决方案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/

希望能解决你的问题。

【讨论】：