Question

我有一个包含一些内容的div，我正在显示一个带有jQuery的按钮。我想淡化它，因此我使用了：

display:none; opacity: 0

首先，在html上，我已经将按钮的html设置为object Execute { def main(args: Array[String]) { val sc = new SparkContext(sparkConf) if(businessException needs to be raised) //What to do??? } }我已经实现了显示/隐藏按钮，但是当它显示时，它会立即拉伸div。相反，我希望父div通过转换进行扩展。

我创造了一个小提琴：https://jsfiddle.net/atg5m6ym/7450/。在这个例子中，当我按下触发按钮时，我希望按钮淡入以及在父div上应用转换。

Answer 1

接受的答案是矫枉过正。只需使用.fadeIn()并完全忘记不透明度和转换设置。如果您希望将div展开与按钮分开，只需将效果应用于div，然后在div效果结束时触发按钮效果。这段代码与接受的答案完全相同，没有任何CSS问题：

$(function(){
   jQuery('#otherButton').hide();
   jQuery('#two').hide();
});
$('#trigger').click(function() {
	$('#two').slideDown(2000, function(){
       $('#otherButton').fadeIn();
    });
	
})

#container, #two {
   background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
    <div id="content">
      <button id="trigger">Trigger</button>
      <br>

      Lalala La<br>
      Lalala La<br>
      Lalala La<br>
      <div id="two">
        <button id="otherButton">Test Btn</button>&nbsp;
      </div>

    </div>
</div>

Answer 2

为了获得最佳性能，在CSS中使用transitions和animations时，您应该坚持使用opacity和transform而不是display: none;和width/height }。

将引用我上面所述的评论：

你设计的方式并不理想，你不应该使用 display：none;在过渡或动画中。这将导致重绘在浏览器中，您无法使用二进制转换属性设置，显示只是在状态之间切换（例如：无/块），而不是像不透明度这样的值之间。

您可以做的是分离您的内容，共享相同的背景颜色以模拟它是同一个容器。

然后使用transform和scale()功能。

代码段：

jQuery('#trigger').click(function() {
  jQuery('.bottom-content').addClass('open');
})

.top-content,
.bottom-content {
  background-color: lightblue;
}
.bottom-content {
  transform: scaleY(0);
  transition: transform 250ms ease-in;
  transform-origin: top;
}
.bottom-content.open {
  transform: scaleY(1);
}
.bottom-content.open #otherButton {
  opacity: 1;
}
#otherButton {
  margin-top: 20px;
  opacity: 0;
  transition: opacity 10s;
  transition-delay: 250ms;
  /* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}

<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="content">
    <section class="top-content">
      <button id="trigger">
        Trigger
      </button>
      <br />Lalala La
      <br />Lalala La
      <br />Lalala La
      <br />
    </section>
    <section class="bottom-content">
      <button id="otherButton">
        Test Btn
      </button>
    </section>
  </div>
</div>

Answer 3

您可以组合jquery：

jQuery('#trigger').click(function() {
    jQuery('#otherButton').slideDown(300).css('opacity', 1);
})

请注意，我使用slideDown()函数而不是show()。使用转换功能可以设置执行时间。 show()只是切换css display属性，但您无法转换display属性。

Updated Fiddle

Answer 4

您可以简单地添加一个类，而不是使用jQuery添加CSS。

将此类设置为您想要的任何属性，我们为：

.is-visible {
  opacity: 1;
}

示例小提琴：https://jsfiddle.net/atg5m6ym/7456/

现在，CSS在切换display: none;时并不想转换，所以我只需设置height: 0;并仅在.is-visible类上应用必要的样式。

拉伸Div的过渡

4 个答案: