Как сделать анимацию появления блока в ангуляре?

430

23 января 2017, 19:54

Как сделать чтобы когда нажимаем второй раз на кнопку, то блок плавно возвращался назад? jquery использовать нельзя, проект делается на ангуляре.

var app = angular.module('myApp', []); 
app.controller('personCtrl', function($scope) { 
    $scope.myVar = false; 
    $scope.toggle = function() { 
        $scope.myVar = !$scope.myVar; 
    }; 
});

/* Styles go here */ 
 
.fixed { 
  position: fixed; 
  background: blue; 
  color: white; 
  width: 50%; 
  padding: 40px 0; 
  animation: my 200ms both linear; 
} 
 
@keyframes my { 
  from { 
    width: 0; 
  } 
  to { 
    width: 50%; 
  } 
}

<!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet" href="style.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="script.js"></script> 
  </head> 
 
<body> 
 
 
<div ng-app="myApp" ng-controller="personCtrl"> 
 
<button ng-click="toggle()">Show block</button> 
 
<p class="fixed" ng-show="myVar"> 
   this is filter 
   
</p> 
 
</div> 
<div> 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, omnis earum accusamus dicta. Ipsa, consectetur, beatae illo impedit veniam esse ea fugiat corrupti consequuntur quasi minima nobis quidem dolorem ad. 
</div> 
 
</body> 
</html>

Answer 1

Немного неверно с точки зрения использования ангуларовских классов, но суть ясна:

var app = angular.module('myApp', []); 
app.controller('personCtrl', function($scope) { 
    $scope.myVar = false; 
    $scope.toggle = function() { 
        $scope.myVar = !$scope.myVar; 
    }; 
});

/* Styles go here */ 
 
.fixed { 
  position: fixed; 
  background: blue; 
  color: white; 
  width: 50%; 
  padding: 40px 0; 
  transform: none; 
  transition: transform .2s; 
} 
 
.ng-hide:not(.ng-hide-animate) { 
  display: block !important; 
} 
 
.fixed.ng-hide { 
   transform: translate(-110%) 
}

<!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet" href="style.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="script.js"></script> 
  </head> 
 
<body> 
 
 
<div ng-app="myApp" ng-controller="personCtrl"> 
 
<button ng-click="toggle()">Show block</button> 
 
<p class="fixed" ng-show="myVar"> 
   this is filter 
   
</p> 
 
</div> 
<div> 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, omnis earum accusamus dicta. Ipsa, consectetur, beatae illo impedit veniam esse ea fugiat corrupti consequuntur quasi minima nobis quidem dolorem ad. 
</div> 
 
</body> 
</html>

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

CSS-спрайты и border-image

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

347

CSS

Обтекание контейнеров

Есть контейнеры с свойством float:leftпод каждым контейнеромКонтейнер с описанием при добавлении больше одного слова

367

CSS

Плавное изменение высоты на CSS 3 [требует правки]

Имею сайт на ajax, и при переходах по страницам на мобильных устройствах заметил, что контент слишком резко появляется, и блоки side-bar из-за этого...

387

c++

Read access violation при удалении объекта структуры

Имеется такая структура:

318