Question

我根据加载或加载数据的时间动态地向表中添加类。

我有：

@keyframes row-loading {
  0% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes row-loaded {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1.0;
  }
}

使用者：

tr {
      height: 45px;
      &.loading {
        -webkit-animation: row-loading 0.8s;
        -webkit-animation-fill-mode: forwards;
      }
      &.loaded {
        -webkit-animation: row-loaded 0.8s;
      }
...

问题是，如果数据加载太快，则会应用.loaded类，并且不透明度会跳转到0，而不是从加载时开始。

我怎样才能让这个从上一课开始的地方开始消失？

Answer 1

你可以尝试转换而不是像这样的动画

tr {
  height: 45px;
  opacity:1;
  transition: opacity 0.8s;

  &.loading {
    opacity: 0.3;
  }
}

当你开始加载数据时，将“loading”类添加到“tr”，这样转换将开始变为不透明度：1到不透明度：0.3;当数据完成加载时，只需删除“加载”类，它将返回其原始不透明度

SCSS Opacity过渡交叉淡入淡出

1 个答案: