Css Slide in Anim

by amindunited

HTML

<main-component></main-component>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js">
</scrip>

CSS

.searchBar, .resultsBar {
  min-height: 100px;
  background-color: white;
  padding: 10px;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.resultsBar {
  animation-duration: 3s;
  animation-name: slidein;
}
.searchBar {
  animation-duration: 3s;
  animation-name: slideout;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
@keyframes slideout {
  from {
    margin-left: -100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript

/*
  var MainComponent = {
    template: '<div>Main Component</div>'
  }
*/

(function (angular) {
  angular.module('trialApp', [])
  .component('mainComponent', {
  	controller: function () {
    	this.showResults = false;
      this.search = function () {
      	this.showResults = !this.showResults;
      };
      this.results = [{
      	name: 'Result 1'
      },
      {
      	name: 'Result 2'
      },
      {
      	name: 'Result 3'
      },
      {
      	name: 'Result 4'
      }]
    },
  	template: `<div>
    	<div ng-if='!$ctrl.showResults' class='searchBar'>
      	<h3>Search</h3>
      	<input type='text'/><button ng-click='$ctrl.search()'>Search</button>
      </div>
      <div ng-if='$ctrl.showResults' class='resultsBar'>
      	<h3>Results <button ng-click='$ctrl.search()'>Search again</button></h3>
        <ul>
        	<li ng-repeat='(key, result) in $ctrl.results'>{{result.name}}</li>
        </ul>
      </div>
    </div>`
  });
	angular.bootstrap(document, ['trialApp']);
})(angular);