td relative 中的过渡元素使表格闪烁答案

【问题标题】：Element in transition inside td relative makes table flickertd relative 中的过渡元素使表格闪烁
【发布时间】：2017-03-16 20:10:49
【问题描述】：

td{position: 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：我不是质疑。我在问。我这样做是因为理解这一点很重要，以便能够产生一个好的解决方案。我认为寻求澄清很重要。休息由你决定。

标签： html css angularjs google-chrome twitter-bootstrap-3

【解决方案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 编辑器中，它可以工作，但在其他任何地方都不能工作。

【讨论】：