Question

我一整天都在努力解决这个小小的问题:)我希望按钮可以放大过渡效果，当我加入按钮时，按钮会以一种奇怪的方式表现一秒钟然后就像它应该的那样。当我删除过渡线时，一切都还可以，但我希望它能够慢慢“打开”。

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

和linkL https://codepen.io/hubkubas/pen/JZNRpp

问题在于，当我将信封悬停在按钮上时，按钮越来越大但是一秒钟它也越来越高，当我删除“转换”时，一切都还可以，但按钮变化非常快，我希望它变慢/ p>

Answer 1

为按钮添加一个高度，并将其隐藏到.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

按钮转换不完美

1 个答案: