在Safari中使用CSS动画化动态大小的内容

Question

该向导有3个步骤.我想为3个步骤之间的过渡设置动画.在第一步,用户可以单击"下一步"按钮.当他们这样做时,按下步骤1的内容并显示步骤2.步骤2还有一个"下一步"按钮,用户可以单击该按钮.单击时,翻转步骤1和步骤2的内容以显示步骤3中的内容.

如果我使用绝对高度,我已经成功地将卡片在Safari中翻转.我已经能够container在Safari中根据需要动态增长.但是,我无法让这两件事在Safari中一起工作.我能够在Chrome和Firefox中这样做.

目前,我有以下Bootply.其具有以下结构:

  <section class="container">
    <div id="card">
      <figure class="front">
        <div class="step-2-default" id="step2" style="overflow-x:hidden; padding:0.0rem 1.0rem;">
          <label>Step 2</label>
          <p>These are the details of the second step</p>
          <button id="nextButton2">next</button>        
        </div>

        <div class="step-1-default" id="step1">
          <label>Step 1</label>
          <p>These are the details of the first step</p>
          <button id="nextButton1">next</button>
        </div>
      </figure>

      <figure class="back">
        <div id="step3">
          <label>Step 3</label>
          <p>Thank you for using this wizard</p>
        </div>
      </figure>
    </div>
  </section>

在这个Bootply中,卡片翻转起作用.但是,container没有正确渲染.我正试图让卡背后的浅灰色背景随着卡的增长而增长.当第2步显露时,背景应该会增长.但事实并非如此.我无法使用绝对高度,因为每个步骤中的内容都是动态的.

我已经能够获得动态增长的背景.或者,我已经能够让卡正常翻转.但是,我不能让他们在Safari中一起工作.

任何帮助表示赞赏.

Answer 1

我认为你不必要地将事情复杂化了。我们可以在这里使用边框：

#card figure {
    border: 10px solid #808080;
    display: block;
    height: auto;
    width: 100%;
    color: #fff;
    text-align: center;
    font-weight: bold;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

http://www.bootply.com/7Q9RMtpv3F