html - hacer - El elemento en transición dentro de td relative hace parpadear la tabla
tablas en html5 (3)
La combinación de td{position: relative} , elemento que contiene ( <i> ) con transition hace parpadear la tabla (bordes y fondo) en el navegador Chrome (Versión 54.0.2840.71 m, windows 10) al alternar 1,2,3 en el fragmento a continuación ( fronteras, fondo).
¿Es este comportamiento deseado, error, o se puede resolver con algo de CSS?
(Necesito una posición para estar allí ya que otro código también está confiando en él)
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>
.odd td {
background: gray;
}
Debería arreglarlo. Establezca la transición a 10s. Y luego puede ver que tr se vuelve a renderizar y el color no se aplica a todas las columnas.
Creo que se debe a la animación de transform . Hacer que un elemento se rotate se calcula de muchas maneras por el navegador y aquí con Chrome, es como si el elemento no table en la table mientras estaba animado ...
no funciona con ninguna otra propiedad de transformación.
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>
se parece a Chrome error de representación, de todos modos, forzar la aceleración 3D resolver el problema (o al menos en mi cromo) .
eso es gracioso, en el editor de fragmentos de código, funciona, pero no funciona en ningún otro lado.