Не могу оживить нг-шоу AngularJS - PullRequest
Новая
       24

Не могу оживить нг-шоу AngularJS

1 голос
/ 13 апреля 2020

Я пытаюсь сделать постепенное исчезновение анимации при выполнении условия ng-show. Я вижу анимацию для ng-hide, но не для ng-show.

HTML: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate@1.7.8/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
  <input type="text" data-ng-model="name"/>
  <input type="button" data-ng-click="click()" value="Click"/>
  <input type="button" data-ng-click="reset()" value="Reset"/>
  <div data-ng-show="bool" class="test">
     {{name}}
  </div>
</div>

CSS

.test.ng-show{
  transition:1s linear all;
  opacity:0;
}
.test.ng-show.ng-show-active{
   opacity:1;
}

JS

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

app.controller('myCtrl',function($scope){
    $scope.name='';
  $scope.bool=false;
  $scope.click=function(){
    $scope.bool=true;
  };
  $scope.reset=function(){
    $scope.bool=false;
    $scope.name='';
  };
});

Вот ссылка на JSFiddle моего кода.

1 Ответ

0 голосов
/ 13 апреля 2020

Вы можете обновить CSS для достижения этой цели. Нажмите кнопку Toggle, чтобы увидеть лучший эффект переключения анимации. 

var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
  $scope.name = 'Hello World!';
  $scope.bool = false;
  $scope.click = function() {
    $scope.bool = true;
  };
  $scope.reset = function() {
    $scope.bool = false;
    $scope.name = '';
  };
});
.test.ng-hide-add,
.test.ng-hide-remove {
  transition: 1s linear all;
  opacity: 1;
}
.test.ng-hide {
  opacity: 0;
}
.test{ margin-top:20px;font-size:2rem}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate@1.7.8/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
  <input type="text" data-ng-model="name" />
  <input type="button" data-ng-click="click()" value="Click" />
  <input type="button" data-ng-click="bool = !bool" value="Toggle" />
  <input type="button" data-ng-click="reset()" value="Reset" />
  <div data-ng-show="bool" class="test">
    {{name}}
  </div>
</div>
...