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

【问题标题】：animate the div from top to bottom using angularjs使用angularjs从上到下为div设置动画
【发布时间】：2015-09-27 11:15:12
【问题描述】：

我使用 angularjs.. 代码运行良好，带有文本的红色 div 显示在底部，当我单击 div 时，它从下到上动画...但我想将 div 放在顶部，当我点击在它上面... div 从上到下滑动...我尝试了一切但没有任何帮助...请帮助我

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

【问题讨论】：

你能创建一个fiddle或plunkr吗？
这是链接codepen@AlbertoI.N.J.
你能提供更多关于你想要达到的目标的细节吗？
你看到了链接..??..我在上面的评论中提到了.??..
是的，我看到了链接，但我不太了解主要目标。

标签： jquery css angularjs html

【解决方案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。

希望对你有帮助。

【讨论】：