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

时间:2015-07-09 07:56:50

标签: jquery css angularjs html5

我使用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%;}
}

1 个答案:

答案 0 :(得分:0)

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

您需要删除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

希望它有所帮助。