在 Safari 中使用 CSS 为动态大小的内容设置动画

Question

此向导有 3 个步骤。我想为这 3 个步骤之间的过渡设置动画。在第一步，用户可以单击“下一步”按钮。当他们这样做时，第 1 步的内容被下推并显示第 2 步。第 2 步还有一个用户可以单击的“下一步”按钮。点击时，step1和step 2的内容会翻转显示step 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

Answer 2

好的，我想我已经解决了这个问题。我稍后会添加一个 sn-p，但想法是您可以在第一张卡片之前和最后一张卡片之后添加一个间隔 div，其高度与您的边距相同。然后将容器高度设置为自动，它应该可以解决您的问题。

编辑：应该这样做。添加了一个工作小提琴。享受吧。

HTML 应该是这样的

window.onload = init()
function init(){

    var card1 = document.getElementById('card-1')
    var card2 = document.getElementById('card-2')
    var card3 = document.getElementById('card-3')

    card2.style.display = 'none'
    card3.style.display = 'none'

    function addButton(el){

        var newButton = document.createElement('button')
        var buttonAttribute = document.createAttribute('id')
        
        buttonAttribute.value = 'next-button'
        newButton.setAttributeNode(buttonAttribute)
        newButton.textContent = 'Next'

        el.appendChild(newButton)

        return newButton
    }

    var nextButton = addButton(card1)

    nextButton.addEventListener('click',function(){

        this.parentElement.removeChild(this)
        var nextButton = addButton(card2)

        card2.style.display = 'block'
        nextButton.addEventListener('click',function(){

            card3.style.display = 'block'
            card3.style.display = 'flip2 1.5s ease-in-out 0s forwards'
            container.style.animation = 'flip 1.5s ease-in-out 0s forwards'
        })

    })

}

*, html, body{box-sizing: border-box; color: white;}
html, body{margin: 0;}
#container{
    width: calc(200px + 20px);
    height: auto;
    background: grey;
    position: relative;
    margin: auto;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
.space{height: 10px}
.card{
    background: red;
    height: 140px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#card-3{
    background: blue;
    top: 10px;
    left: 10px;
    height: 280px;
    position: absolute;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

@keyframes flip{
    0%{
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateY( 0deg );
        -moz-transform: rotateY( 0deg );
        -o-transform: rotateY( 0deg );
        transform: rotateY( 0deg );
    }
    100%{
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateY( 180deg );
        -moz-transform: rotateY( 180deg );
        -o-transform: rotateY( 180deg );
        transform: rotateY( 180deg );
    }
}

@keyframes flip2{
    0%{
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateY( 0deg );
        -moz-transform: rotateY( 0deg );
        -o-transform: rotateY( 0deg );
        transform: rotateY( 0deg );
    }
    100%{
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateY( 180deg );
        -moz-transform: rotateY( 180deg );
        -o-transform: rotateY( 180deg );
        
}

<div id="container">

    <div class="space"></div>

    <div id="card-1" class="card">
        <p>Step 1</p>
        <p>These are the steps of step one</p>
    </div>
    <div id="card-2" class="card">
        <p>Step 2</p>
        <p>These are the steps of step two</p>
    </div>
    <div id="card-3" class="card">
        <p>Step 3</p>
        <p>This is the end</p>
    </div>

    <div class="space"></div>

</div>