在td relative中的转换元素使表闪烁

Question

td{position: relative}包含元素(<i>)的组合transition在Chrome(版本54.0.2840.71 m,windows 10)浏览器中切换1,2,3在下面的片段(边框,背景)时使表闪烁(边框和背景).

这是期望的行为,错误,还是可以用一些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>

Answer 1

.odd td {
  background: gray;
}

应该修复它。将过渡设置为 10 秒。然后您可以看到 tr 被重新渲染，并且颜色并未应用于所有列。