Combinaison de est ce comportement, bug ou Peut-il être résolu avec des CSS? strong> p> (j'ai besoin de position pour être là car d'autres code s'appuient également sur elle) em> p> TD {Position: relatif} code>, élément contenant ( code>) avec transition code> fait le scintillement de la table (bordures et arrière-plan) dans chrome fort> (version 54.0.2840.71 m, navigateur de Windows 10) Lors de la basculement de 1,2,3 dans l'extrait de l'extrait ci-dessous (bordures, arrière-plan).
<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>
3 Réponses :
.odd td {
background: gray;
}
Should fix it.
Set the transition to 10s. And then you can see that tr is re-rendered and the color is not applied to all columns.
Merci pour une entrée, mais il ne résout pas le problème avec les frontières vacillantes (cochez la dernière bascule après avoir basculé dans l'ordre) Codepen.io/anon/pen/lbvpxj
Bonjour, oui je peux voir le problème. On dirait quand l'animation exécute les autres styles ne sont pas appliquées ...
Je pense que c'est dû à l'animation code> code>. Faire un élément 'T Travailler avec une autre propriété de transformation. P> p> rotate code> est calculé avec de nombreuses manières différentes par navigateur et ici avec chrome, c'est comme l'élément ne figure pas dans la table code> pendant qu'il est animé ...
<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>
ressemble à un bug de rendu chromé, de toute façon, forcer l'accélération 3D résolvez le problème (ou au moins dans mon chrome) .
C'est drôle, dans l'éditeur de code Snippet, cela fonctionne, mais ne travaille nulle part ailleurs.
Je ne vois aucune animation du tout.
Il n'y a pas d'animation, seule la transition sur
a élément@Terafor: Toute raison particulière Toutes les
Table , toustr et toutTD sont définis surPosition: relatif; ?? Supprimer cela et il n'y aura pas de scintillement. Voir ceci: jsfiddle.net/abhitaks/fg1gmcpe@Abhitaks Ne remettez pas pourquoi, veuillez fournir des solutions / des explications à la question de la question
@Terafor: Je suis pas interrogatoire. Je demande. Et je le fais parce que cela est important de comprendre pour pouvoir effectuer une bonne solution. Et je crois qu'il est important de demander des éclaircissements. Le repos est à vous.
:) @Abhitaks Comme je l'ai signalé dans la description, un autre code s'appuie sur TD pour avoir une position de position. Dans de nombreux cas, il s'agit d'un autre élément à l'intérieur avec la position absolue. J'espère que cela clarifie les choses