SCSS 不透明度过渡交叉淡入淡出答案

【问题标题】：SCSS Opacity transition cross-fadeSCSS 不透明度过渡交叉淡入淡出
【发布时间】：2017-02-02 22:32:47
【问题描述】：

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

我有：

@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，而不是从 .loading 离开时开始。

我怎样才能让它从上一课停止的地方开始淡入？

【问题讨论】：

&.loaded { opacity: 0.3; -webkit-animation: row-loaded 0.8s;}

标签： css sass less opacity

【解决方案1】：

你可以尝试过渡而不是像这样的动画

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

  &.loading {
    opacity: 0.3;
  }
}

当您开始加载数据时，将“loading”类添加到“tr”，这样就会开始从 opacity:1 到 opacity:0.3 的过渡；当数据完成加载时，只需删除“加载”类，它就会恢复到原来的不透明度

【讨论】：