Question

我想要达到一个非常简单的效果（我想）。当用户点击按钮时，我需要从“视口”的右侧滑入div。进入可查看的页面。目前我已经有了＃幻灯片＆＃39; div的css看起来像这样：

.slider {
    postion: absolute;
    right: -200;
    display: none
}

一旦用户点击按钮，div需要显示，然后向左移动，即

transform: translate(-200px, 0);

在动画结束时，该div的结束状态需要是这样的

.slider.after-animate {
    postion: absolute;
    right: 0;
    display: block;
}

然后用户关闭＆＃39; div，我想将它滑回right: -200px，然后在动画完成后，我想在该div上放一个display：none。

我看过几个ngAnimate教程，但我没有找到与之前/之后＆＃39;之前/之后的交易。动画场景，我需要在动画之前/之后显示\隐藏div。任何人都可以指出我正确的方向????

谢谢！

Answer 1

您可以尝试css keyframes，以便我们拥有超过2个州。在此示例中，每个动画有3种状态。

.slider 
{
  position:absolute;
  right:0px;

  width:200px;
  height:200px;
  border:1px solid red;
  background-color:red;
}

//angular animate automatically adds ng-hide-add when starting to add ng-hide class
.slider.ng-hide-add{
  -webkit-animation: remove_sequence 2s linear ;
  animation:remove_sequence 2s linear;

  display:block!important;
}

//angular animate automatically adds ng-hide-add when starting to remove ng-hide class
.slider.ng-hide-remove{
  -webkit-animation: enter_sequence 2s linear ;
  animation:enter_sequence 2s linear;

  display:block!important;
}

@-webkit-keyframes enter_sequence {
  0% { display:block; 
    right:-200px;
  }
  10% { right:-200px; }
  100% {right:0px;}
}

@keyframes enter_sequence {
  0% { display:block; 
    right:-200px;
  }
  10% { right:-200px; }
  100% {right:0px;}
}

@-webkit-keyframes remove_sequence {
  0% { right:0px; }
  90% { right:-200px; }
  100% {
    right:-200px;
    display:none;

  }
}

@keyframes remove_sequence {
  0% { right:0px; }
  90% { right:-200px; }
  100% {
    right:-200px;
    display:none;
  }
}

DEMO

角度动画帮助 - 滑动然后隐藏

1 个答案: