使用 knockout.js 将 Flash 新项目添加到 dom 中的数组答案

【问题标题】：Flash new item added to array in dom with knockout.js使用 knockout.js 将 Flash 新项目添加到 dom 中的数组
【发布时间】：2018-12-17 12:23:49
【问题描述】：

我有一个播放数组，它使用淘汰赛和一个新项目进行更新。无论如何，当添加视觉效果时，是否可以将字体颜色更改为红色并变回白色。我可以使用下面的绑定轻松地对单个属性执行此操作，但是如何在添加到 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>

【问题讨论】：

标签： javascript css knockout.js css-animations

【解决方案1】：

您可以使用afterAdd foreach 绑定来为新添加的元素设置动画。无需创建自定义绑定（如 flash）

更多knockout foreach

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>

【讨论】：