动画不透明度从0到1而不是后面(animate opacity from 0 to 1 and than back)

动画不透明度从0到1而不是后面(animate opacity from 0 to 1 and than back)

当我删除类时，我试图将不透明度（并将值转换）从0设置为1，然后再设置为0。 不透明度很好地动画为1，但它没有动画回到0.而是它只是跳跃。 看到这支笔，看看我的问题在起作用。 我在这里想念的是什么？

https://codepen.io/timsim/pen/QvppGz

码：

.cp-active { transform: translateY(50px) !important; opacity: 1 !important; } #cp { background-color:red; top: -30px; position: relative; width: 85%; margin: auto; box-shadow: none; border-color: black; z-index: 1; opacity: 0; -webkit-transition: -webkit-transform 0.5s ease-in-out; height:100px; width:100px; } $("body").on("click", function(){ if ($("#cp").hasClass("cp-active")){ $("#cp").removeClass("cp-active") }else{ $("#cp").addClass("cp-active") } });

I am trying to animate opacity( and translate value ) from 0 to 1 and than back to 0, when the class is removed. The opacity animates nicely to 1, but it does not animate back to 0. Instead it just jumps. See this pen to see my problem in action. What am I missing here?

https://codepen.io/timsim/pen/QvppGz

Code:

.cp-active { transform: translateY(50px) !important; opacity: 1 !important; } #cp { background-color:red; top: -30px; position: relative; width: 85%; margin: auto; box-shadow: none; border-color: black; z-index: 1; opacity: 0; -webkit-transition: -webkit-transform 0.5s ease-in-out; height:100px; width:100px; } $("body").on("click", function(){ if ($("#cp").hasClass("cp-active")){ $("#cp").removeClass("cp-active") }else{ $("#cp").addClass("cp-active") } });

最满意答案

嘿看看这个小提琴。 您的过渡需要全部，而不仅仅是TRANSFORM这：

transition: all 0.5s ease-in-out;

代替：

transition: transform 0.5s ease-in-out

因为你也在动画不透明度。

我也改变了你的jQuery功能。 它现在更简单了

$("body").on("click", function() {
  $("#cp").toggleClass("cp-active");
}); 
  
#cp.cp-active {
  transform: translateY(50px);
  opacity: 1;
}

#cp {
  background-color: red;
  position: relative;
  width: 85%;
  margin: auto;
  box-shadow: none;
  border-color: black;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  transform: translateY(0px);
  height: 100px;
  width: 100px;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cp">Hello</div> 
  
 
Hey check out this fiddle. Your transition need to be on ALL and not only on TRANSFORM This:
 
transition: all 0.5s ease-in-out;
 
instead of:
 
transition: transform 0.5s ease-in-out
 
because you are animating opacity as well.
 
Also i switched your jQuery fnction. It's simpler now
 
 
 
  
  
$("body").on("click", function() {
  $("#cp").toggleClass("cp-active");
}); 
  
#cp.cp-active {
  transform: translateY(50px);
  opacity: 1;
}

#cp {
  background-color: red;
  position: relative;
  width: 85%;
  margin: auto;
  box-shadow: none;
  border-color: black;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  transform: translateY(0px);
  height: 100px;
  width: 100px;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cp">Hello</div>