Question

我使用angularjs ..代码工作得很好红色div与文本显示在底部，当我点击div它从下到上动画...但我想把div放在顶部，当我点击在它上面... div从上到下滑动...我尝试了evrything但没有任何帮助我...请帮助我

这是我的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>

这是我的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%;}
}

Answer 1

要实现您的目标，请尝试使用此代码。

您需要删除ng-show="slide"并使用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>

然后删除不必要的styles。

删除：

.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; }

然后添加：

.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; }

您的代码将如下所示：

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%;} }

这是JsFiddle demo。

希望它有所帮助。

使用angularjs从上到下为div设置动画

1 个答案: