Question

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

Answer 2

好的，我想我已经解决了这个问题。我稍后会添加一个片段，但您的想法是，您可以在第一张卡片之前和最后一张卡片之后添加一个间隔div高度。然后，您将容器高度设置为auto，它应该可以解决您的问题。

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

以下是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>

在Safari

2 个答案:

以下是HTML应该是什么样子