Question

我正在尝试将不透明度（并将值转换）从0设置为1，然后在删除类时返回0。不透明度很好地动画为1，但它没有动画回到0.相反它只是跳跃。看到这支笔，看看我的问题在行动。我在这里缺少什么？

代码：

.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

嘿，看看这个小提琴。您的过渡需要全部，而不仅仅是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>

Answer 2

上面的Traver解决方案非常好。这是另一个只使用JQ（没有任何其他CSS除了一般#cp样式）

    $("body").on("click", function(){


            if ($("#cp").hasClass("isVisible")){
                $("#cp").animate({
                  'top':'-50',
                  "opacity":"0"
                },500).removeClass("isVisible")
            }else{
                $("#cp").animate({
                  'top':'0',
                  "opacity":"1"
                },500).addClass("isVisible")
            }
        
    });

    body {
    	height:100vh;
    }
    #cp {
      background-color:red;
      position: relative;
			top:-50px;
      width: 85%;
      margin: auto;
      box-shadow: none;
      border-color: black;
      z-index: 1;
      -webkit-transition: -webkit-transform 0.5s ease-in-out;
      opacity:0;
      height:100px;
      width:100px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cp"></div>

动画不透明度从0到1而不是后面

2 个答案: