jquery - 将不透明度从 0 动画化到 1，然后再返回

Question

当类被删除时，我试图将不透明度(并将值)从 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")
    }

});

Answer 1

嘿看看这个 fiddle 。 您的过渡需要在 ALL 上进行，而不仅仅是在 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>