javascript - 使用 toggleClass ('...' ,false,this 时如何应用过渡......) - Polymer

Question

由于包含 :before 的类本身的性质，我正在使用 toggleClass 功能来应用和删除 CSS 类，但是这里的代码将更通用帮助其他人了解具体细节。

当类被添加到元素时我可以有一个转换，但是当删除它时我似乎无法得到一个。有人可以帮忙吗？

HTML

<div class="container" id="container" on-scroll="toggleShadow">
    <div class="content">

    </div>
</div>

CSS

.blue {
    transition: all 1s;
        background: blue;
    }

    .container {
      height: 300px;
      border: 1px solid grey;
       overflow: auto;
    }

    .content {
      margin: auto;
      width: 50px;
      height: 800px;
      background: linear-gradient(lightblue, limegreen);

    }

JS( polymer )

toggleShadow : function(){
 if(scroll >= 2) {
          this.toggleClass('blue',true,this.$.container);
      } else {
          this.toggleClass('blue',false,this.$.container);
      }
  }

Answer 1

只有在应用 .blue 时才有过渡效果，而不是将过渡效果放在 .container 上

.blue {
    background: blue;
}

.container {
  transition: all 1s;
  height: 300px;
  border: 1px solid grey;
  overflow: auto;
}