Как я могу исчезать и видеть видимость DIV, используя ng-show с бета-версией AngularJS 1.3?

Ответ 1

• Ссылка angular -animate.js

• Добавьте ngAnimate в качестве зависимого модуля:

  var app = angular.module('app', ['ngAnimate']);
  

• Выберите имя для вашего перехода, например "fade", а затем определите соответствующие классы CSS на основе соглашения об именах, описанного в документация:

  .fade.ng-hide {
    opacity: 0;
  }
  
  .fade.ng-hide-remove,
  .fade.ng-hide-add {
    display: block !important; /* or inline-block, as appropriate */
  }
  
  .fade.ng-hide-remove {
    transition: all linear 1000ms;
  }
  
  .fade.ng-hide-add {
    transition: all linear 500ms;
  }
  

• Добавьте класс в свой элемент:

  <div class="block-border fade" ng-show="qty > 0">
  

Демо: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview

Ответ 2

Я не мог получить принятый ответ на работу, но следующее работа (взятое в основном из этого сообщения ng-nuggets):

.fade {
    transition: all linear 500ms;
    opacity: 1;
}

.fade.ng-hide {
    opacity: 0;
}

а затем мой HTML-элемент, который я хотел затухать, выглядел примерно так:

<span data-ng-show="copyLinkClicked" class="fade">some text here</span>

Как отметил @MichaelNguyen, Bootstrap, похоже, имеет стиль, уже названный fade, и мы используем Bootstrap в нашем приложении, но тем не менее эти стили работали. Если у вас уже есть стиль с именем fade, измените имя на нечто уникальное, прежде чем использовать приведенный выше код.

Ответ 3

Если вы хотите затухать при использовании ng-if в качестве логического angular, здесь есть хорошая документация https://docs.angularjs.org/api/ngAnimate. Я использовал ng-if для моих затухающих целей здесь пример ниже:

form.html

<form name="exampleForm" ng-submit="submit()">
  <input type="email" placeholder="Email Address" ng-model="email" required>
  <input type="text" placeholder="Name" ng-model="name" required>
  <input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
  <input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>

form.css

/* css for button that will show when form is invalid */
.invalid-btn {
  border: 1px solid #222;
  width: 100px;
  height: 50px;
  color: #222;
  background: #fff;
}

.invalid-btn.ng-enter {
  opacity: 1;
}

/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
   opacity: 0;
}

.valid-btn {
  width: 100px;
  height: 50px;
  background: #F26623;
  color: #fff;
}

/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
  transition:0.5s linear all;
  opacity: 0;
}

.valid-btn.ng-enter-stagger {
  /* this will have a 100ms delay between each successive leave animation */
  transition-delay: 0.3s;

  /* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
  transition-duration: 0s;
}

 /* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
  width: 100px;
  height: 50px;
  background: #F26623;
  color: #fff;
  opacity:1;
}

Как это работает, если вы хотите затухать кнопкой с другим цветом или текстом и другим цветом текста, вы можете затухать в кнопке, когда форма заполнена и действительна, а недопустимая кнопка исчезнет, ​​оставив только одну в зависимости от состояния формы. Вид взлома, но он работает и выглядит гладко. Мне пришлось установить задержку с помощью .ng-enter-stagger, потому что загрузка анимаций в одно и то же время вызывала мигание кнопок, их плавное переключение и плавное оживление. Таким образом, в этом случае мы разрешаем недействительную кнопку скрыть сначала, а затем загружать действительную кнопку, когда форма действительна, и все поля ввода заполнены правильно.