使用关键帧显示none none动画

Question

我使用angular 4作为我的框架。我正在试图从左侧为节目添加动画。我写下面的代码

.help-section 
    background-color #EDF6F8; 
    width 300px 
    display none; 
    position relative; 
    padding 20px 
    animation hidefromleft 1s 

.help-section.show-help 
    display block 
    animation showfromright 1s 



@keyframes showfromright { 
    from { 
    right:-300px; display none; 
    } 
    to { 
    right 0;display block; 
    } 
} 

@keyframes hidefromleft { 
    from { 
    right 0;display block; 
    } 
    to { 
    right:-300px; display none; 
    } 
} 

显示工程完美，但隐藏不。有什么办法来处理动画元素的隐藏。隐藏不采取任何动画。

Answer 1

我不认为你可以单独从CSS动画显示属性。

然而，不透明度和可见性可以是动画。

怎么是这样的：

.help-section { 
    animation: hidefromleft 2s; 
} 

@keyframes hidefromleft { 
    0% {right: 0; display: block; opacity: 1;} 
    50% {right: -300px; opacity: 0} 
    100% {opacity: 1; display: none;} 
} 

就个人而言，我一直使用的过渡，而不是动画（https://www.w3schools.com/css/css3_transitions.asp）。