Button 按钮转换无法正常工作

我一整天都在为这个小效果而挣扎：我想用过渡效果放大按钮，当我加入它时，按钮会以一种奇怪的方式运行一秒钟，然后像它应该的那样。当我删除过渡线一切都是好的，但我想它打开缓慢

这是css代码：

button {
      position: fixed;
      bottom: 100px;
      right: 0;
      width: 40px;
      transition: all 0.3s ease 0s;
}
.none {
  display: none;
}

a {
  font-size:10px;
  margin: 10px;
  float: left;
}

.active {
  color:red;
  width:200px;
}

i {
    padding: 0;
    margin: 0;
    font-size:30px;
    float: left;
}

和JS代码：

$("button").hover(
  function () {
  $(this).addClass("active")
  $('a').removeClass("none")
},
  function () {
  $(this).removeClass("active")
  $('a').addClass("none")
});

还有林克尔

---

问题是，当我悬停信封时，按钮变大了，但有一秒钟它也变高了，当我删除过渡时，一切都正常，但按钮变化非常快，我希望它变化得更慢

为按钮添加一个高度，并向.active类隐藏溢出

button {
      position: fixed;
      bottom: 100px;
      right: 0;
      width: 40px;
      transition: all 0.3s ease 0s;
      height:40px;
}

.none {
  display: none;
}

a {
  font-size:10px;
  margin: 10px;
  float: left;
}

.active {
  color:red;
  width:200px;
  overflow:hidden;
}


i {
    padding: 0;
    margin: 0 auto;
    font-size:30px;
    float: left;
}