Кнопка перехода не работает идеально - PullRequest
Новая
       10

Кнопка перехода не работает идеально

0 голосов
/ 13 июня 2018

Я боролся с этим небольшим эффектом в течение всего дня :) Я хотел бы, чтобы кнопка увеличивалась с эффектом перехода, и когда я ее включаю, кнопка на секунду ведет себя странным образом, а затем так, как и должна.Когда я удаляю строку перехода, все в порядке, но я бы хотел, чтобы она медленно открывалась.

Итак, это код 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")
});

и ссылка L https://codepen.io/hubkubas/pen/JZNRpp

Проблема в том, что когда я наведу курсор на конверт, кнопка становится больше, но на секунду она также становится выше, когда я удаляю «переход», все в порядке, нокнопка меняется очень быстро, и я бы хотел, чтобы она менялась медленнее

1 Ответ

0 голосов
/ 13 июня 2018

Добавьте высоту к кнопке и переполнение скрыто для класса .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

...