淘汰赛 beforeRemove 和 CSS 动画不能在 IE 中一起工作
鼓
我有一个使用 Knockout foreach 来填充一些行的表。长话短说，视图模型会定期更新新数据，并且从该表中删除不再有效的任何行。
使用 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> 用户3297291
当您转换表格行元素时，IE11似乎存在一个已知问题......当我尝试在 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内部的过渡。您可以在动画库的源代码中查找这些内容。
我找不到太多关于表行转换“错误”的信息……但是我测试了这两种替代方法，它们确实解决了您的问题。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
UITableView的项目向下滚动后更改颜色，然后快速备份
- 2
Linux的官方Adobe Flash存储库是否已过时？
- 3
用日期数据透视表和日期顺序查询
- 4
应用发明者仅从列表中选择一个随机项一次
- 5
Mac OS X更新后的GRUB 2问题
- 6
验证REST API参数
- 7
Java Eclipse中的错误13，如何解决？
- 8
带有错误“ where”条件的查询如何返回结果？
- 9
ggplot：对齐多个分面图-所有大小不同的分面
- 10
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 11
如何从视图一次更新多行（ASP.NET - Core）
- 12
计算数据帧中每行的NA
- 13
蓝屏死机没有修复解决方案
- 14
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 15
离子动态工具栏背景色
- 16
VB.net将2条特定行导出到DataGridView
- 17
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
- 18
在Windows 7中无法删除文件（2）
- 19
python中的boto3文件上传
- 20
当我尝试下载 StanfordNLP en 模型时，出现错误
- 21
Node.js中未捕获的异常错误，发生调用
我来说两句