AngularJS 애니메이션은 처음에는 작동하지 않지만 처음 클릭하면 모두 양호합니다.

Question

2 가지 형식이 있습니다. 페이지를로드 한 후 첫 번째가 보이고 다른 쪽이 숨겨집니다. 처음에 Add-button을 클릭하면 제 2 양식을 나타내는 애니메이션이 작동하지 않습니다. 하지만 첫 번째 클릭 후 취소 버튼을 클릭하고 다시 버튼을 클릭하면 모든 것이 올바르게 작동합니다. 어떻게하면 "첫 번째 클릭"에도이 기능을 사용할 수 있습니까? 관심있는 사람들이 있다면

, 나는 다음 튜토리얼에서 적응하기 위해 시도하고 내 plunker는 여기 HTML은 자바 스크립트 애니메이션 부분은 다음과 같습니다

<div ng-controller="MainCtrl as main" xmlns="http://www.w3.org/1999/html"> 
    <form ng-hide="main.showNewUserForm" class="ff-toggle-animation"> 
    <input type="text" id="search" ng-model="main.username" size="30" placeholder="New username here"> 
    <button type="submit" class="btn btn-primary" ng-click="main.showNewUserForm=true">Add</button> 
    </form> 
    <form ng-show="main.showNewUserForm" class="ff-toggle-animation"> 
    Username: <input type="text" id="add" ng-model="main.username" size="30" placeholder="New username here"><br> 
    Full name: <input type="text" ng-model="main.name" size="30" placeholder="Add new user full name here"><br> 
    Description: <textarea id="description" rows="2" ng-model="main.description" placeholder="Add user description here"></textarea> 
    <button type="submit" ng-click="main.save()">Save</button> 
    <button type="submit" ng-click="main.showNewUserForm=false">Cancel</button> 
    </form> 
    Some content after... 
</div> 

입니다 http://plnkr.co/edit/02E8eQFHQVynK3mE1IMg?p=preview

입니다 http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html :

app.animation('.ff-toggle-animation', function() { 
    return { 
    addClass : function(element, className, done) { 
     if(className == 'ng-hide') { 
     jQuery(element).hide(400, done); 
     } 
     else { 
     done(); 
     } 
    }, 
    removeClass : function(element, className, done) { 
     if(className == 'ng-hide') { 

     /* remove it early so you can animate on it since 
      it is not possible using element.css() to set 
      a style using !important */ 
     element.removeClass('ng-hide'); 
     jQuery(element).show(400, done); 
     } 
     else { 
     done(); 
     } 
    } 
    }; 
}); 

Answer 1

나는 튜토리얼을 제대로 따라 가지 못했다는 것을 알 수있다. 내가 애니메이션을 performe 수

element.removeClass('ng-hide'); 

나는이 같은 요소를 숨길 필요가 :

jQuery(element).hide(); 

그래서 지금 애니메이션의 NG 숨기기 제거 라인 전에

show 부분은 다음과 같습니다 :

removeClass : function(element, className, done) { 
    if(className == 'ng-hide') { 
    jQuery(element).hide(); 

    /* remove it early so you can animate on it since 
    it is not possible using element.css() to set 
    a style using !important */ 
    console.log(element); 
    element.removeClass('ng-hide'); 
    jQuery(element).show(400, done); 
    } 
    else { 
    done(); 
    } 
}