角度滑动和滑动与ngif和css动画

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