блок ng-animate при переходе в то же состояние

(Решение находится в нижней части этого поста).

В настоящее время у нас есть проблема в использовании нашего проекта ng-animate.
У нас есть два состояния, давайте пока назовем их: состояние 1 и состояние 2. Оба имеют свое имя состояния как класс div. <div class="state1">.

Теперь state1 должен скользить наверх, а slide2 должен скользить снизу. Это работает отлично при переключении между slide1 и slide2. Однако если пользователь нажимает на другую кнопку, которая переходит в состояние state1 (находясь в состоянии state1), то должно изменяться только содержимое и анимация не должна выполняться.

В настоящее время мы используем: .state1.ng-leave { }для выхода анимации на state1 div и .state2.ng-enter { }на входе в состояние. Как вы можете видеть, когда я на state1 и нажав на кнопку, которая даст другую страницу с state1, то все равно .state1.ng-leave { }будет вызываться и анимация будет сделана.

У кого-нибудь есть решение для нас? Параметр ng-leave {}for state1 должен запускаться только при входе в state2.

Поток State1 / State2

Вещи, которые мы пробовали:

  • Мы попытались добавить что-тоstate('home.state1', { }, чтобы заблокировать ng-animationдля state1. Когда вы вводите state1, нам никогда не нужна анимация. Мы не нашли решение, используя это. Возможно, есть что-то, что мы можем добавить к onExit:тому, что мы не пытались?
  • Мы также пытались работать с ng-animate в div.

Предварительный просмотр в этом plnkr я сделал пример того, что происходит неправильно. Если вы нажмете «state1», вы увидите, что страница скользит вверх, но мы этого не хотим. Мы просто хотим «обновить» страницу, так что вы просто получите страницу без анимации. Если вы нажмете state2, анимация должна быть выполнена (как показано в Примере). Я также добавил кнопку на странице state2, которая показывает, как должна загружаться страница при переходе от state1 к state1. Пожалуйста, проверьте мой пример ниже:

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

Edit-Решение:
Решение было довольно простым, и я нашел его из-за принятой реакции ниже. В.state() из state1 добавлено:

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

Это удаляет класс state1 из div (поскольку класс state1 находится в том же div, что и «анимированная панель». Просто добавил, что удалить правильный класс). Как я применил анимацию на
.state1.ng-leave { } он больше не может делать анимацию, так как у него больше нет этого класса.

Проверил его serveral раз, и отлично работает!

2 ответа

  1. смотрите в jquery, когда когда-либо мы используем функцию animate, то мы сначала используем STOP then animate для eg : $(‘cntrol’).остановить.)(animate (функция(—
    поэтому я думаю, что вам нужно найти какую-то функцию остановки в angular, чтобы, когда вы начнете анимировать сначала, она остановит существующую функцию animate.

  2. Ну вот вопрос, который я вижу. Любой якорный тег с # берется в качестве перенаправления angular, поэтому то, что он делает, когда ваш маршрут ‘/’ установлен на домашнюю страницу, angular перенаправляет на этот якорный клик на домашнюю страницу и, поскольку на домашней странице применяется анимация 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>
    

    Надеюсь, это поможет.

    [Редактировать]

    Ok после того, как вы знаете свое полное требование теперь на основе вашего комментария к этому ответу. Я думаю, что я придумал другое решение, чтобы соответствовать вам потребности. Его не идеально, но он работает, пока мы не найдем хорошее решение. Вот что вам нужно сделать (имея в виду образец кода, которым вы поделились).

    а) делаем новую страницу и называем ее 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) добавьте класс page-no-animateв CSS, установив его так же, как домашнюю страницу с цветом фона и т. д. за исключением части анимации не будет следующим образом:

    .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) измените код главного контроллера следующим образом. Что он делает, это имеет функцию с именемgotoOther, которая устанавливает pageClass page-no-animateи перенаправляет на другую страницу с помощью $location.path("/other"). После этого funtion у нас есть 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) в вас страница-Главная.html, в теге якоря «State1»: очистите атрибут href и добавьте атрибут ng-click для вызова функции gotooter, созданной в контроллере следующим образом

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