拉伸Div的过渡 [英] Transition on Stretching Div

问题描述

我有一个包含一些内容的div，并且我正在显示一个带有jQuery的按钮.我想淡入它，所以我用了:

I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:

setTimeout(function() {
    jQuery('#button').css('opacity', 1);
}, 100);

首先，在html上，我将按钮的html设置为display:none; opacity: 0，我已经实现了显示/隐藏按钮，但是当它显示时，它会使div立即拉伸.相反，我希望父div随着过渡而扩展.

First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.

我创建了一个小提琴: https://jsfiddle.net/atg5m6ym/7450/.在此示例中，当我按下触发按钮时，我希望按钮淡入并在父div上应用过渡.

I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.

推荐答案

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

For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.

将引用我上面提到的评论:

Will quote the comment I stated above:

您设计的方式并不理想，您不应该使用 显示:无；在过渡或动画中.这将导致重画 在您的浏览器中，并且您不能使用二进制转换属性 设置，仅显示状态之间的切换(例如:无/阻止)，而不显示 像不透明度这样的值之间.

The way you designed this is not ideal, you should not be using display: none; in transitions or animations. This will cause redrawing in your browser, and you cannot transition properties with binary settings, display just switches between states (ex: none/block), not between values like opacity does.

---

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

---

What you could do is separate your content, sharing the same background color to simulate it is the same container.

然后使用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>

这篇关于拉伸Div的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！