使用关键帧显示 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)。

使用关键帧显示 none 个动画

Display none animation using keyframes

keyframe

css-animations