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）。

使用关键帧显示无动画

1 个答案: