Clever Geek Handbook

Animate div from top to bottom using angularjs

I am using angularjs .. the code works well, a red div with text is shown at the bottom and when I click on the div it animates from bottom to top ... but I want to place the div on top and when I click on it ... the div slides from top to bottom. .. i try evrything but nothing helps me ... please help me

this is my html

<body ng-app="ngAnimate">
  <div>
    <div class="animate-slide" ng-show="slide" ng-click="slide=!slide">
      <center>AngularJS ng-animate<center>
    </div>
  </div>
</body>

this my css

body{
  background-color:#FFF;
  height:100%;
  width:100%;
  margin:0;
  color:#FFF;
  font-size:3em;
  line-height:100px;
  text-align:center;
  overflow:hidden;
}

#slide{
  position:absolute;
  width:100%;
  height:100px;
  top:90%;
  background: red;
}  

.animate-slide {
  background:red;
  position:absolute;
  width: 100%;
  height:100%;
  top: 0;
  -webkit-transform: translate3d(0,0,0); /* Chrome, Safari, Opera */
  transform: translate3d(0,0,0,);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.animate-slide.ng-hide-add,
.animate-slide.ng-hide-remove {
  display:block!important;
}

.animate-slide.ng-hide-remove.ng-hide-remove-active {
  -webkit-animation:0.5s slide-up;
  animation:0.5s slide-up;
}

.animate-slide.ng-hide-add.ng-hide-add-active {
  -webkit-animation:0.5s slide-down;
  animation:0.5s slide-down;
}

.animate-slide.ng-hide {
  top:80%;
  display:block!important;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-up
{
  0%   {top:80%;}
  100%  {top:0;}
}

/* Standard syntax */
@keyframes slide-up
{
  0%   {top:80%;}
  100%  {top:0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-down
{
  0%  {top:0;}
  100%   {top:80%;}
}

/* Standard syntax */
@keyframes slide-down
{
  0%  {top:0;}
  100%   {top:80%;}
}
+3


source to share


1 answer


Try this code to achieve what you want.

You need to remove ng-show="slide"

and use ng-class

.

Html

<body ng-app="ngAnimate">
  <div>
    <div class="animate-slide" 
         ng-class="{'slide-up': !slide, 'slide-down': slide}" 
         ng-click="slide = !slide">
      <center>AngularJS ng-animate</center>
    </div>
  </div>
</body>

Then delete the unnecessary one styles

.

Delete

.animate-slide.ng-hide-add,
.animate-slide.ng-hide-remove {
  display:block!important;
}

.animate-slide.ng-hide-remove.ng-hide-remove-active {
  -webkit-animation:0.5s slide-up;
  animation:0.5s slide-up;
}

.animate-slide.ng-hide-add.ng-hide-add-active {
  -webkit-animation:0.5s slide-down;
  animation:0.5s slide-down;
}

.animate-slide.ng-hide {
  top:80%;
  display:block!important;
}


Then add:

.animate-slide.slide-down {
  -webkit-animation:0.5s slide-down normal forwards;
  animation:0.5s slide-down normal forwards;
}

.animate-slide.slide-up {
  -webkit-animation:0.5s slide-up normal forwards;
  animation:0.5s slide-up normal forwards;
}

Your code will look like this:

body{
  background-color:#FFF;
  height:100%;
  width:100%;
  margin:0;
  color:#FFF;
  font-size:3em;
  line-height:100px;
  text-align:center;
  overflow:hidden;
}

#slide{
  position:absolute;
  width:100%;
  height:100px;
  top:90%;
  background: red;
}  

.animate-slide {
  background:red;
  position:absolute;
  width: 100%;
  height:100%;
  top: 0;
  -webkit-transform: translate3d(0,0,0); /* Chrome, Safari, Opera */
  transform: translate3d(0,0,0,);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.animate-slide.slide-down {
  -webkit-animation:0.5s slide-down normal forwards;
  animation:0.5s slide-down normal forwards;
}

.animate-slide.slide-up {
  -webkit-animation:0.5s slide-up normal forwards;
  animation:0.5s slide-up normal forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-up
{
  0%   {top:80%;}
  100%  {top:0;}
}

/* Standard syntax */
@keyframes slide-up
{
  0%   {top:80%;}
  100%  {top:0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-down
{
  0%  {top:0;}
  100%   {top:80%;}
}

/* Standard syntax */
@keyframes slide-down
{
  0%  {top:0;}
  100%   {top:80%;}
}

Here's the JsFiddle demo .

Hope it helps.

0


source






More articles:


All Articles