如何避免div跳跃位置：绝对/固定？

Question

我有position:fixed的div。我已经为这个元素添加了一个类，并希望改变它的位置，但是它从顶部跳到底部并且转换不起作用。为什么会这样？

我将.blazon--bottom类附加到元素，然后.is-active

.blazon {
  opacity: 1;
  position: fixed;
  width: 100%;
  padding: 20px;
  background: #eee;
  color: #000;
  text-align: center;
  transition: all 0.4s ease;
}

.blazon--bottom {
  bottom: -105px;
  top: auto;
}

.blazon--bottom.is-active {
  bottom: 0px;
}

jQuery的：

Plugin.prototype.show = function(){
   var that = this;
   $(that.element).addClass('is-active');

   if(this.options.autoClose){
        setTimeout(function(){
            that.hide();
        }, this.options.during);
   }
}

Plugin.prototype.hide = function(){
    $(this.element).removeClass('is-active');
}

完整示例：click here