0

I'm trying to get the .post__input--not-set to scale on click. Tried adding a CSS transformation without luck.

$(".post__input--not-set").hide();
$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").addClass('animate').toggle();
});
.btn-class {
  color: white;
  padding: 30px;
  background: blue;
}

.new {
  background-color: green
}

.post__input--not-set {
  transform: scale(0);
  transition: all 5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red
}

.post__input--not-set.animate {
  transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<a class="btn-class"><i class="fa fa-pencil-alt"></i></a>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>
Kyle Underhill
  • 89
  • 15
  • 43

3 Answers3

3

You could remove $(".post__input--not-set").hide() from your js, and toggle only the transform. Does this work for you?

$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").toggleClass('animate');
});
.btn-class {
  color: white;
  padding: 30px;
  background: blue;
}

.new {
  background-color: green
}

.post__input--not-set {
  transform: scale(0);
  transition: transform 5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red
}

.post__input--not-set.animate {
  transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<a class="btn-class"><i class="fa fa-pencil-alt"></i></a>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>
sol
  • 22,311
  • 6
  • 42
  • 59
1

Transitions don´t work if the element is initially gone. The display: none style actually removes the elements. So when you toggle the display property they are recreated with the animate class already and there´s nothing changing to be animated.

The only (but wrong) way to make it work would be to display the elements first, force a reflow (to force the browser to paint them without the animate class), and then set the animate class.

The correct ways would be

  • to have the elements always displayed (using visibility or opacity to hide them), but that´s not always possible because they will be there occupying space and receiving events,
  • to use JS to create new elements before each transition and destroying them after,
  • or to use JS to do the whole animation.
Gabriel
  • 2,170
  • 1
  • 17
  • 20
1

Interesting discussion: CSS3 transition on click using pure CSS

Possible solution:

   $(".post__input--not-set").hide();
$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").addClass('animate').toggle();
  if ($(".post__input--not-set").css("transform") == 'none') {
    $(".post__input--not-set").css("transform", "scale(0)");
  } else {
    $(".post__input--not-set").css("transform", "scale(1)");
  }

});
    .btn-class {
  color: white;
  padding: 30px;
  background: blue;
}

.new {
  background-color: green
}

.post__input--not-set {
  transform: scale(0);
  transition: transform 5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<a class="btn-class"><i class="fa fa-pencil-alt"></i></a>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>
sashwat
  • 607
  • 4
  • 10