Question

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

这是一个想要的行为，错误，还是可以通过一些CSS来解决？

（我需要有位置，因为其他代码也依赖它）

＆＃13;

var app = angular.module('app', []);
app.controller('testCtrl', function($scope) {
  $scope.bodys = [1, 2, 3];
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

.odd td {
  background: gray;
}

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

Answer 2

我认为这是由于transform动画造成的。制作元素rotate是通过浏览器以及Chrome浏览器的多种不同方式计算出来的，它就像table中的元素一样，而他的动画是......

不适用于任何其他转换属性。

＆＃13;

var app = angular.module('app', []);
app.controller('testCtrl', function($scope) {
  $scope.bodys = [1, 2, 3];
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

看起来像chrome渲染bug，无论如何，~~强制3d加速解决问题（或者至少在我的chrome中）~~。

这很有趣，在代码片段编辑器中，它可以工作，但不能在其他任何地方工作。

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

3 个答案: