按钮转换无法正常工作

debugcn 发表于 Dev

休伯特·库巴谢维奇

我一整天都在为这个小效果苦苦挣扎:) 我希望按钮放大并带有过渡效果，当我包含它时，按钮会以一种奇怪的方式运行一秒钟，然后就像它应该的那样。当我移除过渡线时，一切正常，但我希望它慢慢“打开”。

所以这是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")
});

和链接https://codepen.io/hubkubas/pen/JZNRpp

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

布鲁斯·亚当斯

为按钮添加高度并将溢出隐藏到 .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;
}

https://codepen.io/anon/pen/GGEWNG

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。