Question

我有一个使用Knockout foreach填充某些行的表。简而言之，viewmodel定期更新新数据，并且从该表中删除任何不再有效的行。

使用beforeRemove绑定，然后应用CSS动画将行淡出。这适用于Chrome和Firefox，但出于某种原因无法在IE11中使用。如果在beforeRemove之外使用，则动画的完全相同的代码将在IE 11中起作用。我在下面的代码段中汇总了我的代码的简化版本。

关于为什么IE出现问题的任何想法？谢谢！

var item = function(name) {
  this.name = ko.observable(name);
}

$('document').ready(function () {
  function queueViewModel() {
    var self = this;
    self.queueItems = ko.observableArray([
      new item("one"),
      new item("two"),
      new item("three"),
      new item("four")
    ]);
    self.removeItem = function(item) {
      self.queueItems.remove(item)
    }
    self.beforeRemoveFadeOut = function (element) {
        $(element).addClass('animated fadeOutUp')
        .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
            //Actual code removes an element here
            $(element).remove();
        });
    }
  }
  var queueViewModel = new queueViewModel();
  ko.applyBindings(queueViewModel,document.getElementById('wrapper'));
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <table>
    <thead>
      <th>Item Name</th>
      <th>Remove Item</th>
    </thead>
    <tbody data-bind="template: { foreach: queueItems, beforeRemove: beforeRemoveFadeOut }">
      <tr>
        <td><span data-bind="text:name"></span></td>
        <td><a href='#' data-bind="click: $parent.removeItem">Remove</a></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

当您转换表格行元素时，IE11似乎已知issue ...当我尝试在IE11中翻译表格行时，它根本不显示任何内容：

table {
  background: red;
}

tr {
  transform: translate3d(50px, 0, 0);
  background: green;
}

<table>
  <tbody>
    <tr>
     <td>test</td>
   </tr>
 </tbody>
</table>

不知何故，这会导致无法加载完整的动画。反过来，这导致animationEnd事件永远不会触发。

我建议你：

在您的标记中使用其他HTML元素（<li>，<div>等），或
使用内部不使用transform的转换。您可以在动画库的源代码中查找这些内容。

我找不到关于表行变换“bug”的内容......但是我测试了这两种替代方案并确实解决了你的问题。

var item = function(name) {
  this.name = ko.observable(name);
}

$('document').ready(function () {
  function queueViewModel() {
    var self = this;
    self.queueItems = ko.observableArray([
      new item("one"),
      new item("two"),
      new item("three"),
      new item("four")
    ]);
    self.removeItem = function(item) {
      self.queueItems.remove(item)
    }
    self.beforeRemoveFadeOut = function (element) {
        $(element)
          .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
            $(element).remove();
          })
          .addClass('animated fadeOutUp');
    }
  }
  var queueViewModel = new queueViewModel();
  ko.applyBindings(queueViewModel,document.getElementById('wrapper'));
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  
    <ul data-bind="template: { foreach: queueItems, beforeRemove: beforeRemoveFadeOut }">
      <li class="">
        <span data-bind="text:name"></span>
        <a href='#' data-bind="click: $parent.removeItem">Remove</a>
      </li>
    </ul>
</div>

Knockout beforeRemove和CSS动画不能在IE中一起工作

1 个答案: