Yếu tố chuyển đổi bên trong td tương đối làm cho bảng nhấp nháy

Sự kết hợp của td{position: relative}, chứa nguyên tố (<i>) với transition làm bảng nhấp nháy (biên giới và các nền) trong Chrome (Phiên bản 54.0.2840.71 m, cửa sổ 10) trình duyệt khi chuyển đổi qua lại 1, 2,3 trong đoạn dưới (biên giới, nền).Yếu tố chuyển đổi bên trong td tương đối làm cho bảng nhấp nháy

Đây có phải là hành vi mong muốn, lỗi hoặc nó có thể được giải quyết bằng một số css không?

(Tôi cần vị trí để có mặt ở đó từ mã khác cũng đang dựa vào 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; 
 
} 
 
.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>

Nguồn

2016-11-03 Terafor

Tôi không thấy hoạt ảnh nào cả. –

không có hoạt ảnh, chỉ chuyển đổi thành phần tử 'a' – Terafor

@Terafor: Bất kỳ lý do cụ thể nào cho tất cả' bảng', tất cả 'tr' và tất cả' td' được đặt thành 'vị trí: tương đối;' ?? Loại bỏ điều đó và sẽ không có nhấp nháy. Xem này: https://jsfiddle.net/abhitalks/fg1gmcpe/ – Abhitalks

.odd td { 
    background: gray; 
}

nên sửa chữa nó. Đặt chuyển đổi thành 10 giây. Và sau đó bạn có thể thấy rằng tr được trả lại và màu sắc không được áp dụng cho tất cả các cột.

Nguồn

2016-11-07 09:49:50 xszaboj

http://codepen.io/xszaboj/pen/ObPdJo ví dụ ở đây – xszaboj

cảm ơn cho đầu vào, nhưng nó không giải quyết vấn đề với biên giới nhấp nháy (kiểm tra chuyển đổi cuối cùng sau khi chuyển đổi theo thứ tự) http: // codepen.io/anon/pen/LbVPxj – Terafor

Xin chào, vâng tôi có thể thấy vấn đề. Có vẻ như khi hoạt ảnh đang chạy các kiểu khác không được áp dụng ... – xszaboj

Tôi nghĩ rằng đó là do hoạt ảnh transform. Tạo thành phần rotate được tính bằng nhiều cách khác nhau theo trình duyệt và tại đây với Chrome, giống như phần tử không ở trong table khi anh ấy hoạt ảnh ...

không hoạt động với bất kỳ thuộc tính biến đổi nào khác.

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>

Nguồn

2016-11-08 08:40:44 Alexis

trông giống như chrome render lỗi, dù sao, ~~buộc 3ngày tăng tốc giải quyết vấn đề (hoặc ít nhất là trong chrome của tôi)~~ .

điều đó thật thú vị, trong trình chỉnh sửa đoạn mã, nó hoạt động nhưng không hoạt động ở bất kỳ nơi nào khác.

Nguồn

2016-11-14 01:53:54 am05mhz

Yếu tố chuyển đổi bên trong td tương đối làm cho bảng nhấp nháy

Trả lời

Các vấn đề liên quan