td relative 中的过渡元素使表格闪烁
Posted
技术标签:
【中文标题】td relative 中的过渡元素使表格闪烁【英文标题】：Element in transition inside td relative makes table flicker 【发布时间】：2017-03-16 20:10:49 【问题描述】：tdposition: relative，包含元素 (<i>) 与 transition 的组合使 Chrome（版本 54.0.2840.71 m，Windows 10）浏览器中的表格闪烁（边框和背景）切换时1,2,3 in sn-p 下面（边框，背景）。
这是期望的行为、错误还是可以通过一些 css 解决？
（我需要位置，因为其他代码也依赖它）
var app = angular.module('app', []);
app.controller('testCtrl', function($scope)
$scope.bodys = [1, 2, 3];
);table,
tr,
td
position: relative;
td
border-top: 1px solid darkgreen !important;
table
table-layout: fixed;
.glyphicon-chevron-right
transition: transform .3s;
cursor: pointer;
.toggled
transform: rotate(90deg);
.odd
background: lightgreen;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body ng-app="app">
<table ng-controller="testCtrl" class="table">
<tbody ng-repeat="b in bodys">
<tr ng-class-even="'odd'">
<td>b</td>
<td>
<a href="" ng-click="toggled = !toggled">toggle <i class="glyphicon glyphicon-chevron-right" ng-class="'toggled': toggled"></i></a>
</td>
<td></td>
</tr>
<tr ng-if="toggled" ng-class-even="'odd'">
<td>b + 100</td>
<td></td>
<td></td>
</tr>
<tr ng-if="toggled" ng-class-even="'odd'">
<td>b + 200</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>【问题讨论】：
我根本看不到动画。 没有动画，只有a元素上的过渡
@Terafor：有什么特别的原因所有table、所有tr和所有td都设置为position: relative;？？删除它，将不会有闪烁。看到这个：jsfiddle.net/abhitalks/fg1gmcpe
@Abhitalks 不质疑原因，请提供解决方案/解释到位的问题
@Terafor：我不是质疑。我在问。我这样做是因为理解这一点很重要，以便能够产生一个好的解决方案。我认为寻求澄清很重要。休息由你决定。
【参考方案1】：
.odd td
background: gray;
应该修复它。 将过渡设置为 10 秒。然后可以看到 tr 被重新渲染，颜色并没有应用到所有列。
【讨论】：
感谢输入，但不能解决边框闪烁的问题（按顺序切换后检查最后一个切换）codepen.io/anon/pen/LbVPxj 嗨，是的，我可以看到问题所在。看起来动画运行时没有应用其他样式...【参考方案2】：我认为这是由于 transform 动画。制作元素rotate 是由浏览器以多种不同方式计算的，这里使用 Chrome，就好像元素不在 table 中，而他的动画...
不适用于任何其他转换属性。
var app = angular.module('app', []);
app.controller('testCtrl', function($scope)
$scope.bodys = [1, 2, 3];
);table,
tr,
td
position: relative;
td
border-top: 1px solid darkgreen !important;
table
table-layout: fixed;
#toggle
position: absolute;
transition: transform .3s;
cursor: pointer;
/*.toggled
transform: rotate(90deg);
*/
.odd
background: lightgreen;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body ng-app="app">
<table ng-controller="testCtrl" class="table">
<tbody ng-repeat="b in bodys">
<tr ng-class-even="'odd'">
<td>b</td>
<td>
<a href="" id="toggle" ng-click="toggled = !toggled" ng-class="'toggled': toggled">toggle</a>
</td>
<td></td>
</tr>
<tr ng-if="toggled" ng-class-even="'odd'">
<td>b + 100</td>
<td></td>
<td></td>
</tr>
<tr ng-if="toggled" ng-class-even="'odd'">
<td>b + 200</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>【讨论】：
【参考方案3】：看起来像 chrome 渲染错误，无论如何，强制 3d 加速解决了问题（或至少在我的 chrome 中）。
这很有趣，在代码 sn-p 编辑器中，它可以工作，但在其他任何地方都不能工作。
【讨论】：
以上是关于td relative 中的过渡元素使表格闪烁的主要内容，如果未能解决你的问题，请参考以下文章
当 td 为 position:relative 时，表格边框未正确呈现