javascript - 将类添加到 Knockout 组件

Question

我正在尝试创建一个 knockout 组件，它将在屏幕底部显示通知。目前效果很好，但我本来打算向通知添加更多动画。理想情况下，我想做的是让通知在 5 秒内立即开始消失。 5 秒后，它将从通知数组中删除，从而删除该元素。但是，如果用户将鼠标悬停在通知上，则淡出序列应完全停止。目前我不知道如何以这种方式访问​​通知的 dom 元素。谁能推荐一个解决方案吗？

HTML 绑定(bind)

<div class="notification-container" data-bind="foreach: notificationArray">
    <notification params="data: $data"></notification>
</div>

通知 JS

appViewModel.notificationArray = ko.observableArray([]);

appViewModel.setNotification = function( message ){
    appViewModel.notificationArray.push({
        'message':message
    })
};

组件 JS

ko.components.register('notification', {
    viewModel: function(params) {

        var data = params.data;

        this.message = data.message || null;
        this.timer = null;

        this.removeNotification = function() {
            appViewModel.notificationArray.remove(data);
        };

        this.timer =  ( function(self) {
            return setTimeout(function() {
                self.removeNotification();
            }, 5000);
        })(this);

        this.hover = function () {
            clearTimeout(this.timer);
        };

        this.restart = function() {
            this.timer = ( function(self) {
                return setTimeout(function() {
                    self.removeNotification();
                }, 5000);
            })(this);
        }

    },
    template: '<div class="notification show-notification" data-bind="event: { mouseover: hover, fastClick: hover, mouseout: restart }">'
        +'<div class="notifications-close clickable right" data-bind="fastClick: removeNotification"><span class="icon icon-x"></span></div>'
        +'<div class="notification-text" data-bind="html: message"></div>'
        +'</div>'
});

----- 更新以显示完成的代码 -----

已完成代码的最终结果是通知现在将从屏幕外弹出，并在 5 秒内立即开始消失。如果单击通知，淡出/从数组中删除将停止(由于移动支持，我删除了鼠标悬停事件)。希望这对其他人有帮助。

HTML 绑定(bind) - 与上面相同

通知 JS - 同上

自定义淡入淡出绑定(bind)

ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        $(element).height();    //need to trigger re-paint in order for transition to fire
        $(element).addClass('show-notification');
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        $(element).stop();
        ko.unwrap(value) ? $(element).fadeIn(0) : $(element).fadeOut(5000);
    }
};

更新了组件 JS

ko.components.register('notification', {
    viewModel: function(params) {

        var data = params.data;

        this.message = data.message || null;
        this.timer = null;
        **this.paused = ko.observable(false);**

        this.removeNotification = function() {
            appViewModel.notificationArray.remove(data);
        };

        this.timer =  ( function(self) {
            return setTimeout(function() {
                self.removeNotification();
            }, 5000);
        })(this);

        this.pause = function () {
            **this.paused(true);**
            clearTimeout(this.timer);
        };

    },
    template: '<div class="notification clickable" data-bind="fadeVisible: paused, fastClick: pause">'
        +'<div class="notifications-close clickable right" data-bind="fastClick: removeNotification"><span class="icon icon-x"></span></div>'
        +'<div class="notification-text" data-bind="html: message"></div>'
        +'</div>'
});

相关CSS

.notification {
    visibility: hidden;
    max-height: 5.5rem;
    overflow: hidden;
    margin: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid rgb(72, 72, 72);
    background: white;
    box-shadow: -5px 5px 15px -3px rgba(0,0,0,0.75);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1.20, 0, 1.20);
    transition: -webkit-transform 0.3s cubic-bezier(0, 1.20, 0, 1.20),transform 0.3s cubic-bezier(0, 1.20, 0, 1.20);
}

.show-notification {
    visibility: visible;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

Answer 1

您需要一个自定义绑定(bind)处理程序来处理淡入淡出。如果您愿意，您也可以处理从绑定(bind)处理程序中的删除，但我无法确定这是否是一个好主意。

ko.components.register('notification', {
  viewModel: function(params) {
    var self = this;
    var data = params.data;

    this.message = data.message || null;
    var timer = null;

    this.removeNotification = function() {
      appViewModel.notificationArray.remove(data);
    };

    this.hover = function() {
      clearTimeout(timer);
    };

    this.restart = function() {
      timer = setTimeout(function() {
        self.removeNotification();
      }, 5000);
    }
    this.restart();

  },
  template: '<div class="notification show-notification" data-bind="event: { mouseover: hover, fastClick: hover, mouseout: restart }, fadeOut:true">' + '<div class="notifications-close clickable right" data-bind="fastClick: removeNotification"><span class="icon icon-x"></span></div>' + '<div class="notification-text" data-bind="html: message"></div>' + '</div>'
});

ko.bindingHandlers.fadeOut = {
  init: function(el) {
    $(el).fadeOut(5000);
    $(el).hover(function() {
        $(el).stop().fadeIn(0);
      },
      function() {
        $(el).fadeOut(5000);
      });
  }
}

appViewModel = {};
appViewModel.notificationArray = ko.observableArray([{
  message: 'Hi there'
}]);

appViewModel.setNotification = function(message) {
  appViewModel.notificationArray.push({
    'message': message
  })
};


ko.applyBindings(appViewModel);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="notification-container" data-bind="foreach: notificationArray">
  <notification params="data: $data"></notification>
</div>