角度滑動和滑動與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%;} 
}