angularjs - Animate ng görüş geçişleri

Question

Ben 2 html sayfaları, sahip welcome.html ve benim angularjs uygulamasının bir parçası olarak, bir ngview nitelik ve yönlendirici sağlayıcısına aracılığıyla URL'yi dependending index.html içine "takılı" her ikisi de login.html.

Bunun bir örneği, numaralı telefonun arkasındaki the AngularJS home page adresinde bulunabilir.

Sorum: welcome.html ve login.html arasındaki geçişi hareketlendirmek için bir yolu var mı?

Answer 1

Angularjs 1.1.4 has now introduced the ng-animate directive to help animating different elements, in particular ng-view.

You can also watch the video about this new featue

GÜNCELLEME, yolu animasyonlar çalışma bunun çoğu şimdi ile kontrol edilir, büyük ölçüde değişti CSS, javascript geri aramalarını kurmak zorunda kalmadan, vs .. updated tutorial on Year Of Moo'u kontrol edebilirsiniz. @ dfsq bir nice set of examples yorumunda dikkat çekti.

Answer 2

Doğrudan AngularJS ile yapmanın bir yolu olduğundan emin değilim, ancak ekranı hem hoşgeldin hem de giriş için hiçbiri olarak ayarlayamaz ve yüklendikten sonra bir yönerge ile opaklığı canlandırabilirsiniz.

Bunu bir şekilde yapardım. 2 İçeriği soldurmak ve bir link tıklandığında ortadan kaldırmak için direktifler. fadeouts için yönerge sadece eşsiz bir kimliğe sahip öğeyi canlandırmak veya kısılması

Template yayınlayan bir hizmet diyebiliriz:

<div class="tmplWrapper" onLoadFadeIn> 
    <a href="somewhere/else" fadeOut> 
</div> 

Direktifleri:

angular 
    .directive('onLoadFadeIn', ['Fading', function('Fading') { 
    return function(scope, element, attrs) { 
     $(element).animate(...); 
     scope.$on('fading', function() { 
    $(element).animate(...); 
     }); 
    } 
    }]) 
    .directive('fadeOut', function() { 
    return function(scope, element, attrs) { 
     element.bind('fadeOut', function(e) { 
    Fading.fadeOut(e.target); 
    }); 
    } 
    }); 

Hizmeti:

angular.factory('Fading', function() { 
    var news; 
    news.setActiveUnit = function() { 
    $rootScope.$broadcast('fadeOut'); 
    }; 
    return news; 
}) 

Sadece bu kodu çabucak bir araya getirdim bu yüzden bazı hatalar olabilir :)

Answer 3

Kontrol Bu kod:

JavaScript:

app.config(["$routeProvider"], function($routeProvider){ 
    $routeProvider.when("/part1", {"templateUrl" : "part1"}); 
    $routeProvider.when("/part2", {"templateUrl" : "part2"}); 
    $routeProvider.otherwise({"redirectTo":"/part1"}); 
    }] 
); 

function HomeFragmentController($scope) { 
    $scope.$on("$routeChangeSuccess", function (scope, next, current) { 
     $scope.transitionState = "active" 
    }); 
} 

CSS:

.fragmentWrapper { 
    overflow: hidden; 
} 

.fragment { 
    position: relative; 
    -moz-transition-property: left; 
    -o-transition-property: left; 
    -webkit-transition-property: left; 
    transition-property: left; 
    -moz-transition-duration: 0.1s; 
    -o-transition-duration: 0.1s; 
    -webkit-transition-duration: 0.1s; 
    transition-duration: 0.1s 
} 

.fragment:not(.active) { 
    left: 540px; 
} 

.fragment.active { 
    left: 0px; 
} 

Ana sayfa HTML:

<div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController"> 
</div> 

Partials HTML örneği: angularjs 1.2 itibariyle

<div id="part1" class="fragment {{transitionState}}"> 
</div> 

Answer 4

Yayını denetlemeyi deneyin.Bu angularjs en ngRoute ve ngAnimate kullanarak web sayfaları arasında geçişler nasıl uygulanacağını gösterir: How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS

Answer 5

1.Install angular-animate

2.Add sayfa giren animasyon ve sayfa çıkan animasyon için sınıfın ng-leave için sınıfa ng-enter için animasyon efekti

başvuru için

: Bu sayfa https://e21code.herokuapp.com/angularjs-page-transition/