1
저는 Angular의 ng-repeat를 사용하여 여러 행이있는 테이블을 생성했습니다. 사용자가 테이블 행을 마우스 오버 할 때 특정 표 셀을 애니메이션으로 만들고 싶습니다.ng-animate가있는 테이블 행에서 지정된 테이블 데이터를 어떻게 애니메이션으로 만들 수 있습니까?
이 예제의 경우, 행을 마우스로 가리키면 해당 애니메이션 셀을 표시하거나 (불투명도 : 1), 행의 높이를 변경하지 않으려합니다 (즉 행 높이 보이지 않는 셀 데이터를 고려해야 함).
CSS 애니메이션과 애니메이션을 시도했지만 모든 시도가 애니메이션으로 적용됩니다. 모든 행의 해당 셀 (예 : 두 번째 열이 애니메이션 된 다중 행 테이블에서 두 번째 모든 셀이 애니메이션 됨) 열은 마우스가 테이블의 어느 부분에있을 때 반응합니다).
Full example available in jsBin includes both Greensock TweenMax and css animation attempts.
관련 HTML (이 버전에서 단지 2 열은/적혈구 변경 공개/불투명도) (TweenMax 사용)
<table class="view-container">
<tr ng-repeat="row in ctrl.rows"
ng-click="fadeIt($index)"
id={{$index}}>
<td>index #{{($index)}}</td>
<td class="animation red" hide-me="isHidden")>red background</td>
<td class="animation blue">blue backgrounds</td>
</tr>
</table>
관련 JS
var app = angular.module('app', ['ngAnimate']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.isHidden = false;
$scope.fadeIt = function(id) {
$scope.isHidden = !$scope.isHidden;
};
}]);
app.directive("hideMe", function ($animate) {
return function (scope, element, attrs) {
scope.$watch(attrs.hideMe, function (newVal) {
if (newVal) {
$animate.addClass(element, "fade");
} else {
$animate.removeClass(element, "fade");
}
});
};
});
app.animation(".fade", function() {
return {
addClass: function (element, className) {
TweenMax.to(element, 1, {opacity: 0});
},
removeClass: function(element, className) {
TweenMax.to(element, 1, {opacity: 1});
}
};
});