ngAnimate轉換在ui-view中滾動當前頁面到頁首

Question

當我點擊下一個按鈕時，在我的某個視圖下方轉到另一個狀態時，我所在的當前頁面將滾動回頂部，然後最終ngAnimate和css開始滑動2個部分。但是，我不喜歡所產生的轉換，因爲它會引起閃爍的效果。

我想要發生的是，當我點擊下一個按鈕時，我想保持當前視圖在屏幕上的位置，然後開始滑動。

有什麼我需要改變我的代碼？我的ui-view上的autoscroll =「false」似乎沒有幫助。

這是我的新CSS。

#content-view.ng-enter, #content-view.ng-leave { 
    position: absolute; 
    // width: 100%; 
    -webkit-transition:all 2s ease-in-out; 
    transition:all 2s ease-in-out; 
    } 
    #content-view.ng-enter { 
    // transform: translateX(100%); 
    // -webkit-transform: translateX(100%); 
    transform: translate3d(100%, 0, 0); 
    -webkit-transform: translate3d(100%, 0, 0); 
    } 
    #content-view.ng-enter-active { 
    // transform: translateX(0); 
    // -webkit-transform: translateX(0); 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    } 
    #content-view.ng-leave { 
    opacity: 1; 
    // transform: translateX(0); 
    // -webkit-transform: translateX(0); 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    } 
    #content-view.ng-leave-active { 
    opacity: 0; 
    // transform: translateX(-100%); 
    // -webkit-transform: translateX(100%); 
    transform: translate3d(-100%, 0, 0); 
    -webkit-transform: translate3d(-100%, 50, 50); 
    } 

這是一個蹲點，但我不知道爲什麼它不在這裏發生。我的代碼中可能存在某些行爲。

不管怎麼說，我喜歡這個視圖之間切換時的行爲。但是，我希望能夠在點擊它時正確定位新的目標視圖。現在，如果我們說我正在顯示view1並向下滾動，一旦我點擊視圖2，我希望view1的位置保持原樣，但我希望視圖2的位置位於正確的頂部位置，而不是相同的位置如view1。

http://plnkr.co/edit/thDO1WZ9YUcV9yGfkVjh?p=preview

UPDATE：

這裏是我如何得到它的工作的解決方案。我喜歡幻燈片的過渡。它看起來非常專業。從main.html中

<div id="content-view" ng-class="{ 'backEvent' : $root.backEvent === true, 'entryComplete' : $root.entryComplete === true }" ui-view="content" autoscroll="false"></div> 

形式的初始負載

片段，$ scope.entryComplete設置爲false。當我填寫表單並點擊下一步，$ scope.entryComplete變爲true。我把它放在控制器中。既然它成爲現實，這兩個類將被使用，＃content-view.entryComplete.ng-enter和＃content-view.entryComplete.ng-enter-active。

現在，當我點擊後退按鈕時，$ root.entryComplete變爲false，$ root.backEvent變爲true。現在entryComplete已經不存在了，這些將被使用＃content-view.ng-enter和＃content-view.ng-enter-active，對於ng-leave，將使用這些＃content-view.backEvent.ng-leave和＃content-view.backEvent.ng-leave-active。當我再次單擊下一步時，我將backEvent設置爲false

這是我整天工作的魔法的一部分。

#content-view.ng-enter { 
    opacity: 0; 
    transform: translate3d(-100%, 0, 0); 
    -webkit-transform: translate3d(-100%, 0, 0); 
    transition: all 2s ease-in-out; 
} 

#content-view.ng-enter-active { 
    opacity: 1; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
} 

#content-view.ng-leave { 
    position: absolute; 
    opacity: 1; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    transition: all 2s ease-in-out; 
} 

#content-view.ng-leave-active { 
    position: absolute; 
    opacity: 0; 
    transform: translate3d(-100%, 0, 0); 
    -webkit-transform: translate3d(-100%, 0, 0); 
} 

#content-view.entryComplete.ng-enter { 
    opacity: 1; 
    transform: translate3d(100%, 0, 0); 
    -webkit-transform: translate3d(100%, 0, 0); 
    transition: all 2s ease-in-out; 
} 

#content-view.entryComplete.ng-enter-active { 
    opacity: 1; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
} 

#content-view.backEvent.ng-leave { 
    position: absolute; 
    opacity: 1; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    transition: all 2s ease-in-out; 
} 

#content-view.backEvent.ng-leave-active { 
    position: absolute; 
    opacity: 0; 
    transform: translate3d(100%, 0, 0); 
    -webkit-transform: translate3d(100%, 0, 0); 
} 

不要忘了，我在某個線程中提到的其他魔法，將存儲電流Y（頂部）座標值之一。

var offsets = document.getElementById('content-view').getBoundingClientRect(); 
document.getElementById('content-view').style.top = (offsets.top - 65) + 'px'; 

我拿出.style.position =「絕對」，因爲我已經得到了它的CSS硬編碼。請享用！

Answer 1

這可能是你要找的東西？

$scope.gotoTop = function() { 
    $location.hash('top'); 
    $anchorScroll(); 
}; 

將此函數添加到導航欄的控制器並將函數添加到您的每個鏈接。

<a ng-click="gotoTop()" href="#/home">Example</a>

例NavCtrl.js

angular.module('app').controller('NavCtrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) { 

    $scope.gotoTop = function() { 
     $location.hash('top'); 
     $anchorScroll(); 
    }; 

}]);