Adobe Edge Animate에서 웹킷 변환 대신 상단/왼쪽 사용

Question

Adobe Edge Animate를 사용하여 드래그 앤 드롭이 가능한 jquery로 멋진 상호 작용을했습니다. 한 영역에서 다른 영역으로 상자를 끌어옵니다. 모두 괜찮 았어.

그런 다음 상자에 입구 애니메이션을 추가하기로 결정했습니다. jquery draggable은 객체의 왼쪽 상단에 애니메이션을 적용했기 때문에 모든 것을 망가 뜨 렸습니다. 그러나 Edge에서 애니메이션을 추가하면 상단에 설정되고 left는 0으로 설정되고 webkit transformX/Y를 사용합니다.

이제 곧 드래그가 시작됩니다. draggable이 위쪽으로 움직이기 때문에 상자가 아래로 점프합니다. left :, Edge Animate가 변형을 유지하고 있습니다.

EA에 위쪽을 사용하도록 강제하는 방법이 있습니까 : 왼쪽 : 애니메이션 용입니까? 상자 입구의 일부에는 회전이 포함되어 있으므로 변환을 사용하여 X/​​Y를 수행하고 모두를 회전시킬 수 있습니다.

아이디어가 있으십니까?

Answer 1

문제는 AE에서 "위쪽"과 "왼쪽"을 움직일 수 있지만 transformX/Y 또는 css top : left :로 변경되는지 여부를 제어 할 수 없다는 것입니다. AE는 자신의 생각을 바꿔줍니다. 일단 아이템을 움직이면 (예 : 회전 또는 크기 조절), 위쪽/왼쪽을 사용을 중지하고 x y 및 부패를 포함하여 하나의 변환으로 결합하는 것으로 결정한 것으로 보입니다. AE는 css top : left : 속성에 애니메이션을 적용하도록 선택하지 않으며 썩음에 대한 CSS 변환을 추가합니다.

그럼에도 불구하고 지금은 작동 해킹을 발견했습니다. 드래그가 시작되면 클래스를 추가하십시오.

.notransition { 
    -webkit-transform:none!important; 
    transform:none!important; 
} 

따라서 변환이 지워지고 드래그가 완벽하게 작동합니다. 이상한 일은 드롭 한 후에 클래스를 제거하지 말라는 것입니다. 그것은 남은 시간 동안 머물러 있습니다. 만약 당신이 그것에 대해 생각한다면 변환은 아무 것도없고 위쪽과 왼쪽은 jquery-ui draggable에 의해 영구적으로 수정되었으므로 의미가 있습니다.