css - 使用 ngif 和 css 动画进行 Angular 滑入和滑出

Question

我需要一个侧面板，它可以在单击按钮时滑入和滑出。我正在尝试用纯 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%;}
}

Answer 1

我用这组代码得到了答案。但是要确定代码集是否正确。

有什么用

.showFlyoutPanel.ng-进入，.showFlyoutPanel.ng-离开{}

.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%;}
}