AngularJS 복제 요소 및 애니메이션 위치

Question

AngularJS를 처음 사용하고 제품에서 "장바구니에 담기"버튼을 클릭하면 PrestaShop과 같은 간단한 애니메이션을 만들고 싶습니다.

나는 AngularJS와의 애니메이션에 대한 좋은 기사를 찾았지만, 그 일을 몇 가지 방법이있다 ... 내가 그들과 텍스트 버튼 각각에 대해 사진과 함께 제품의 그리드 목록이 있다고 가정

"에 추가 카트". 사용자가 사진을 클릭하면 사진이 "복제 됨"이어야하고 불투명도는 0.5이어야하며이 사진은 사이트 상단에있는 카트로 슬라이드해야합니다.

나는 하나 개의 개념이 : 두 번 렌더링 할 수 있습니다 NG 반복에

사진, 그 중 하나가 숨겨져 추천하고 그들에 영향을해야 애니메이션과 함께 언급 한 "복제", "두 번째 뒤에"이지만, AngularJS 방식으로 만드는 법? (좋은 생각 인 경우)

Answer 1

오래된 브라우저를 지원할 필요가없는 경우 사진을 두 번 렌더링하는 대신 다음과 같이 시도하십시오.

.opaque { 
    opacity: 0.5; 
    /* and maybe other browser specific opacity settings */ 
} 

을 그리고 당신의 HTML에서 :, 불투명도를 변경하기 위해 CSS를 설정

말을 당신이 볼 수 있듯이

<img src="...." ng-class="{opaque:isOpaque}" /> 
<button type="button" ng-click="isOpaque=true">Add to cart</button> 

는 <img>에 NG-클래스는 불투명 '으로 설정 '는 isOpaque === true 인 경우에만 활성화됩니다. '장바구니에 추가'버튼을 클릭하면 isOpaque가 true로 설정됩니다.

나머지는 컨트롤러를 평소대로 준비하는 것입니다.

희망이 도움이됩니다.