How to make it so that when we press a button a second time, the block will smoothly go back? jquery can not be used, the project is done on an angular.

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>

  • why not jQuery? - Mikhail Vaysman
  • because using jquery with an anguly is a bad practice - Dimangry
  • Personally, I do not see anything wrong with this, if you do not mix functionality. - Mikhail Vaysman

1 answer 1

It is a little wrong from the point of view of using Angula classes, but the essence is clear:

 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>