Question

我的简单功能有问题。我有一个功能来显示更多或更少的内容，它工作正常，但我不知道如何添加简单的动画到我的存在功能，如淡入淡出

this.showMore = ko.observable(false);
this.toggleShowMore = function () {
  this.showMore(!this.showMore());
};

和html中的数据绑定

<button class="btn btn-xs btn-info" data-bind='click: toggleShowMore '>More data</button>

此代码工作正常，但我不知道如何添加动画。这是我的第一步，所以我将非常感谢你的帮助。

Answer 1

使用自定义绑定。 http://knockoutjs.com/documentation/custom-bindings.html我几乎复制并粘贴了下面的示例，我只是将其更改为淡化而不是幻灯片。

ko.bindingHandlers.slideVisible = {
    update: function(element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();
 
        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);
 
        // Grab some more data from another binding property
        var duration = allBindings.get('fadeDuration') || 400; // 400ms is default duration unless otherwise specified
 
        // Now manipulate the DOM element
        if (valueUnwrapped == true)
            $(element).fadeIn(duration); // Make the element visible
        else
            $(element).fadeOut(duration);   // Make the element invisible
    }
};

 var viewModel = {
        giftWrap: ko.observable(true)
    };
   viewModel.togglegiftWrap = function() {
      viewModel.giftWrap(!viewModel.giftWrap())
    };
    ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-bind="slideVisible: giftWrap, fadeDuration:600">You have selected the option</div>
<button class="" data-bind="click: togglegiftWrap">More info</button>

动画显示隐藏按钮

1 个答案: