使用angularjs從上到下為div設置動畫

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演示。

希望能幫助到你。

使用angularjs從上到下為div設置動畫

問題描述

1 個解決方案

解決方案1
0 2015-07-09 10:13:26

使用angularjs從上到下為div設置動畫

問題描述

1 個解決方案

解決方案1 0 2015-07-09 10:13:26

解決方案1
0 2015-07-09 10:13:26