带有 ngif 和 css 动画的角度滑入和滑出答案

【问题标题】：Angular slidein and slideout with ngif and css animation带有 ngif 和 css 动画的角度滑入和滑出
【发布时间】：2016-02-25 17:15:23
【问题描述】：

如果单击按钮，我需要一个可以滑入和滑出的侧面板。我正在尝试用纯 css 编写它。

如何才能实现平滑过渡。我尝试了关键帧，但没有得到想要的结果。

这是我的jsFiddle link

这是我玩过的css

.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {

}


.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
  -webkit-animation-name: slideOut; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
    animation-name: slideOut;
    animation-duration: 4s;
    animation-direction: reverse;    
}

.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
   -webkit-animation-name: slideIn; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-direction: forwards; /* Chrome, Safari, Opera */
    animation-name: slideIn;
    animation-duration: 4s;
    animation-direction: forwards; 
}



/* Chrome, Safari, Opera */
@-webkit-keyframes slideIn {
    0%   {right:-100px;}
  25%  {right:-75px;}
  50%  {right:-50px;}
  75%  {right:-25px;}
    100% {right:0;opacity: 1;}
}

/* Standard syntax */
@keyframes slideIn {
     0%   {right:-100px;}
  25%  {right:-75px;}
  50%  {right:-50px;}
  75%  {right:-25px;}
    100% {right:0;opacity: 1;}
}


/* Chrome, Safari, Opera */
@-webkit-keyframes slideOut {
    0%   {right:0px;}
    25%  {right:25%;}
    50%  {right:50%;}
    75%  {right:75%;}
    100% {right:100%;}
}

/* Standard syntax */
@keyframes slideOut {
    0%   {right:0px;}
    25%  {right:25%;}
    50%  {right:50%;}
    75%  {right:75%;}
    100% {right:100%;}
}

【问题讨论】：

标签： css angularjs animation ng-animate

【解决方案1】：

我通过这组代码得到了答案。但是要确定代码集是否正确。还有

有什么用

.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave { }

.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {

}

.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
  -webkit-animation-timing-function: ease-in-out;  
  -webkit-animation: slideOut 5s; /* Chrome, Safari, Opera */
    animation: slideOut 5s ;
}

.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
    -webkit-animation: slideIn 5s; /* Chrome, Safari, Opera */
    animation: slideIn 5s ;
  -webkit-animation-timing-function: ease-in-out;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slideIn {
    from {left: 100%;}
    to {left: 0px;}
}

/* Standard syntax */
@keyframes slideIn {
    from {left: 100%;}
    to {left: 0px;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slideOut {
    from {left: 0px;}
    to {left: 100%;}
}

/* Standard syntax */
@keyframes slideOut {
   from {left: 0px;}
    to {left: 100%;}
}

【讨论】：