Flash 新项目添加到 dom 中的数组中，带有挖空.js

Question

我有一个播放数组，它使用挖空和一个新项目进行更新。 无论如何，当添加字体以获得视觉效果时，是否可以将字体的颜色更改为红色并恢复为白色。 我可以使用下面的绑定轻松地在单个属性上执行此操作，但是如何在添加到 dom 的新对象上执行此操作。

ko.bindingHandlers.flash = {
init: function (element, valueAccessor) {},
update: function (element, valueAccessor) {
var updated = valueAccessor().updated;
if (updated()) {
$(element).addClass('flash');
setTimeout(function () {
$(element).removeClass('flash');
}, 1000);
updated(false);
}
}
};

.CSS

.flash {
color: red;
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: color 0.4s ease;
}

.HTML

<div class="accordion-inner period-play-by-play" data-bind="foreach: plays">
<div class="play" data-bind="css: {'home-team': $data.IsHomeTeam, 'away-team': !$data.IsHomeTeam, 'modified': $data.isNew}">
<b data-bind="text: $data.Time + ' '"></b>
<span data-bind="text: $data.Team + ' ' + $root.actionName($data.Action)"></span> 
<span data-bind="text: $root.actionTypeName($data.ActionType)"></span>
<span>by <i data-bind="text: $data.Name"></i></span>
<!-- ko if: $data.Lead != '' -->
<div class="pull-right" data-bind="text: $data.Lead"></div>
<!-- /ko -->
</div>
</div>

Answer 1

您可以使用foreachafterAdd绑定来对新添加的元素进行动画处理。 无需创建自定义绑定(如 Flash)

更多 在淘汰赛

var vm = {
plays: ko.observableArray([{
IsHomeTeam: Math.random() >= 0.5,
isNew: true,
Time: new Date().toLocaleString(),
Team: 'default team',
Action: 'default action',
ActionType: 'default action type',
Name: 'default name',
Lead: Math.random() >= 0.5
}]),
actionName(name) {
return name;
},
actionTypeName(name) {
return name;
},
flashAnimate(element) {
$(element).addClass('flash');
setTimeout(function() {
$(element).removeClass('flash');
}, 1000);
},
addNew(vm) {
vm.plays.push({
IsHomeTeam: Math.random() >= 0.5,
isNew: true,
Time: new Date().toLocaleString(),
Team: 'new team',
Action: 'new action',
Name: 'new name',
Lead: Math.random() >= 0.5
});
}
};
ko.applyBindings(vm);

.play {
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: color 0.4s ease;
display: flex;
flex-direction: column;
margin: 10px;
padding: 10px;
border: 1px solid;
}
.flash {
color: red;
}

<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.4.2/knockout-min.js"></script>
<div class="accordion-inner period-play-by-play" data-bind="foreach: { data: plays, afterAdd: flashAnimate }">
<div class="play" data-bind="css: {'home-team': $data.IsHomeTeam, 'away-team': !$data.IsHomeTeam, 'modified': $data.isNew}">
<b data-bind="text: $data.Time + ' '"></b>
<span data-bind="text: $data.Team + ' ' + $root.actionName($data.Action)"></span>
<span data-bind="text: $root.actionTypeName($data.ActionType)"></span>
<span>by <i data-bind="text: $data.Name"></i></span>
<!-- ko if: $data.Lead != '' -->
<div class="pull-right" data-bind="text: $data.Lead"></div>
<!-- /ko -->
</div>
</div>
<button style="margin: 0 10px" data-bind="click: addNew">Add New</button>