css - 进入相同状态时阻止ng-animate

（解决方案在此文章的底部）。

目前，我们在使用ng-animate的项目中遇到问题。
我们有两个状态，让我们现在为它们命名：状态1和状态2。它们都有其状态名称作为div类。 <div class="state1">。

现在，state1应该向上滑动到顶部，slide2应该从底部向上滑动。在slide1和slide2之间切换时，这工作正常。但是，如果用户单击移动到状态1的另一个按钮（处于状态1时），则仅内容应更改，并且不应进行动画处理。

当前，我们使用：.state1.ng-leave { }用于state1 div上的离开动画，.state2.ng-enter { }用于进入状态。如您所见，当我进入state1并单击一个将提供带有state1的页面的按钮时，仍然会调用.state1.ng-leave { }并完成动画。

有人为我们提供了解决方案吗？状态1的ng-leave {}仅在进入状态2后才被触发。

State1/State2 flow

我们尝试过的事情：


我们试图在state('home.state1', { }中添加一些内容以阻止state1的ng-animation。当您输入state1时，我们将不再需要动画。我们找不到使用此解决方案。也许我们可以添加一些我们没有尝试过的内容？
我们还尝试在div中使用ng-animate。


预览在这个plnkr中，我举了一个例子，说明出了什么问题。如果单击“ state1”，则可以看到页面正在向上滑动，但是我们不希望那样。我们只想“刷新”页面，所以您只获得没有动画的页面。如果单击state2，则应完成动画处理（如示例所示）。我还在state2页面上添加了一个按钮，该按钮显示了从state1到state1时页面应如何加载。请在下面检查我的示例：

https://plnkr.co/edit/zaFcZFOEtCybRuXobYl0?p=preview

编辑-解决方案：
该解决方案有点简单，由于以下公认的反应，我找到了它。在state1的.state（）中，我添加了：

onEnter: function() { $('.pane-animated').removeClass('state1'); },

这会从div中删除state1类（因为state1类与“窗格动画”位于同一div中。只需添加该类即可删除正确的类）。当我将动画应用于
.state1.ng-leave {}，因为它不再具有此类，因此它不再能够执行动画。

测试了服务器时间，效果很好！

最佳答案

好吧，这是我所看到的问题。任何带有＃的锚标记都将通过角度进行重定向，因此将您的路线“ /”设置为主页时会执行此操作，将锚点上的角度重定向单击到主页，并且主页应用了ng-leave动画。它做动画。

为了实现您想要的功能，您只需要从href中删除#并将其保留为href=""为空。现在，对于为什么想要一个空的锚点并没有任何意义，但这给了您一个肮脏的结果，但结果仍然如此（呵呵）。

现在，假设您希望做到这一点，就是使用＃锚点通过哈希链接导航到同一页面内的标签/元素。您可以使用控制器$ anchorScroll（）。

示例代码：

yourapp.controller('yourControllername', function($scope, $location, $anchorScroll) {
  $scope.scrollTo = function(id) {
  $location.hash(id);
  $anchorScroll();
  }
});

<a ng-click="scrollTo('sectionA')">Foo</a>

<div id="sectionA">Here you are</div>

希望这可以帮助。

[编辑]

确定，现在基于您对此答案的评论，知道了您的全部要求。我想我想出了另一种解决方案以满足您的需求。它不是完美的，但是它可以起作用，直到我们找到一个好的解决方案为止。这是您需要做的（记住您共享的示例代码）。

a）我们创建一个新页面，并将其命名为page-other.html。这将具有与主页相同的链接按钮，其中状态1使用锚点中的​​href="#"导航到主页，状态2像以前一样导航到。只需将<h2>Home</h2>更改为<h2>Home- Other</h2>即可跟踪我们的位置。

b）将页面添加到routeprovider中，但为其提供与mainController相同的控制器，如下所示：

.when('/other', {
        templateUrl: 'page-other.html',
        controller: 'mainController'
    })

c）在类css设置中添加类page-no-animate，就像带有背景颜色等的主页一样。除了动画部分以外，没有其他类，如下所示：

.page-no-animate { background:#00D0BC; color:#00907c; }

.page-no-animate.ng-enter,
.page-no-animate.ng-leave,
.page-no-animate.ng-animate {
   animation:none 0s;
   -webkit-animation: none 0s;
}

d）将mainController代码更改如下。它的作用是具有一个名为gotoOther的函数，该函数将pageClass设置为page-no-animate并使用$location.path("/other")重定向到另一个页面。完成此功能后，我们将通过if-else条件来检查要在哪个位置应用适当的动画或无动画的pageClass值，因为当我们再次单击状态1时，我们不希望其他页面进行动画处理：

animateApp.controller('mainController', ['$scope', '$location',
function($scope, $location) {
    $scope.gotoOther = function () {
        $scope.pageClass = 'page-no-animate';
        $location.path("other");
    };
    if ($location.path() == "/other")
    {
        $scope.pageClass = 'page-no-animate';
    }
    else
    {
        $scope.pageClass = 'page-home';
    }
}]);

e）在page-home.html中的“ State1”锚标记中：清空href属性并添加ng-click属性以调用我们在控制器中创建的gotoOther函数，如下所示

<a href="" ng-click="gotoOther()" class="btn btn-success btn-lg">State1</a>