Question

我目前正在修改插件。我需要检测css动画的变化。我怎么能这样做。

<div id="block">Hello!</div>

<input data-bind="click:Animate" type="button" value="Animate" >

视图模型

function vm(){
    var self = this
    self.Width = ko.observable('70%')
    self.Width.subscribe(function(data){
        console.log(data)
    })

    self.Animate = function(){
        $( "#block" ).animate({
            width: self.Width(),
        }, 1500 );            
    }
}

$('document').ready(function () {
    ko.applyBindings(new vm())
})

订阅未被调用。如何用observable检测css动画变化？

Fiddle

Answer 1

目前没有更新Width观察者的内容，它不会像这样自动跟踪你的内容。您可以使用动画的progress选项来执行此操作：

function vm(){
    var self = this
    self.Width = ko.observable('70%')
    self.Width.subscribe(function(data){
        console.log(data)
    })

    self.Animate = function(){
        $( "#block" ).animate({
            width: self.Width(),
        }, {
            duration: 1500,
            progress: function() {
                self.Width($(this).width());
            }
        });            
    }
}

虽然这仍然有点奇怪，但你正在使用Width observable将宽度设置为动画以及报告进度。

knockoutjs，如何检测css动画的变化

Fiddle

1 个答案: