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

Question

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

当 class 添加到元素时，我可以进行过渡，但删除它时我似乎无法进行过渡。有人可以帮忙吗？

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（聚合物）

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;
}

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

How to apply transition when using toggleClass('...',false,this.....) - Polymer

html

javascript

css

polymer