javascript - 定义自定义 css 属性并使用 animate() 更改任何值

Question

我正在尝试用 javascript 制作一个显示动画乐谱的结果屏幕。对于示例中的特定字段，它应该在两秒内从值变为 0，即屏幕出现后两秒。由于使用 animate() 更改 css 值很容易，我想我可以将值分配给一些自定义 css 属性，然后让元素的值从那里获取它。根据this article我只需要将 -- 放在自定义 css 属性和 this one 的前面向我展示了如何使用 animate() 方法。所以我试着这样做

$elementSuccess.css('--value', scorePlus);

结果是 --value 的值为 undefined。当我在某处显示 scorePlus 时，它出现了，所以它被定义了。还有另一种定义自定义值的方法吗？

这是该元素的完整代码。如果正确定义自定义属性，它会不会有任何错误？

$elementSuccess.html(scorePlus);
$elementSuccess.css('--value', scorePlus);
setTimeout(function(){
    $elementSuccess.animate({
            '--value': 0
        },
        {
            duration: 2000,
            progress: function(){
                $elementSuccess.html(Math.round($elementSuccess.css('--value')));
            }
        }
    );
},2000);

Answer 1

试试这个:

var scorePlus=100;
var $elementSuccess=$('.success');
var myObject = {score:scorePlus};
$elementSuccess.html(scorePlus);
$(myObject).delay(2000).animate({score:0},{duration:2000,progress:function(){$elementSuccess.html(Math.round(myObject.score))}});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="success"></div>

根据我对您的问题的理解，基本上使用伪 myObject 并为其 score 属性设置动画应该可以为您提供所需的效果。另外，我没有使用 setTimeout，而是使用 delay() .