Ответ 1
.odd td {
background: gray;
}
Должен это исправить. Установите переход на 10 секунд. И затем вы можете увидеть, что tr повторно отображается, а цвет не применяется ко всем столбцам.
Комбинация td{position: relative}
, содержащая элемент (<i>
) с transition
, делает мерцание таблицы (границы и фон) в браузере Chrome (версия 54.0.2840.71 м, 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" 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;
}
Должен это исправить. Установите переход на 10 секунд. И затем вы можете увидеть, что tr повторно отображается, а цвет не применяется ко всем столбцам.
Я думаю, это из-за анимации 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>
выглядит как ошибка рендеринга хрома, во всяком случае, принудительное 3D-ускорение решает проблему (или, по крайней мере, на моем хроме).
Это смешно, в редакторе фрагмента кода он работает, но не работает нигде.