我正在尝试创建一个淘汰组件,它会在屏幕底部显示通知。这当前工作正常,但我原本打算能够为通知添加更多动画。理想情况下,我想做的是让通知立即开始淡出超过5秒。 5秒后,它将从通知数组中删除,从而删除元素。但是,如果用户将鼠标悬停在通知上,则应完全停止淡出序列。目前我看不出如何以这种方式访问通知的dom元素。任何人都可以推荐一个解决方案吗?
HTML绑定
<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绑定 - 与上述相同
通知JS - 与上述相同
用于淡化的自定义绑定
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);
}
答案 0 :(得分:1)
您需要一个自定义绑定处理程序来处理淡入淡出。如果你愿意的话,你也可以处理绑定处理程序中的删除,但我无法确定这是否是个好主意。
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);
&#13;
<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>
&#13;