CSS神属性让动画停留在最后一帧

这里用到的动画是一个渐隐消失,原代码是这样的

bug.gif
.fadeOut {
  animation-name: fadeOutAnimation;
  animation-duration: 1s;
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 100%;
  }
  to {
    opacity: 0;
  }
}

view {
  width: 100%;
  height: 300px;
  background-color: darksalmon;
}

但播放完毕后,图层又显现了,查文档发现有一个很好的属性animation-fill-mode,可以解决这个问题,

将fadeOut改造成如下即可。

.fadeOut {
  animation-name: fadeOutAnimation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
finish.gif

源代码托管在Gitee,需要的朋友可以前往下载,https://gitee.com/dotton/demo-wx

mp

你可能感兴趣的:(CSS神属性让动画停留在最后一帧)