CODEWITHSUNDEEP
buttoncss-transitions
Hubert Kubasiewicz
Hubert Kubasiewicz

Reputation: 375

Button transition not working perfectly

I have been struggling with this little effect for all day :) I would like button to enlarge with transition effect, and when I include it the button behaves in a strange way for a second and then like it should. When I remove transition line everything is ok but I would like it to "open" slowly.

So this is the css code:

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;
}

and JS code:

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

and the linkL https://codepen.io/hubkubas/pen/JZNRpp

The problem is that when I hover the envelope the button is getting bigger but for a second its also getting higher, when I delete "transition" everything is ok but the button changes very quickly and I would like it to change slower

Upvotes: 0

Views: 37

Answers (1)

Bruce Adams
Bruce Adams

Reputation: 12300

Add a height to the button and overflow hidden to the .active class.

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

Upvotes: 1

Related Questions