Question

我已经设置了一个动画卡片翻转jsfiddle，它会在按钮点击时发生。它使用Modernizr进行设置以测试该功能，然后在功能可用时启用3d样式。如果你按下运行按钮，你会看到后面板在页面加载时旋转180度，有没有办法禁用它？如果从一开始就设置样式，但我稍后启用它们以实现兼容性，则不会发生这种情况（如果在javascript中启用“＆amp;＆amp; false”，则会看到没有3D变换的浏览器的备用视图）。 HTML：

<div id="card-container">
    <button id="card-flip">Flip the card</button>
    <div id="card">
        <div class="front card-surface"><!-- front -->
            <p>The front</p>
        </div>
        <div class="back card-surface"><!-- back -->
            <p>The back</p>
        </div>
    </div>
</div>

使用Javascript：

if(Modernizr.csstransitions && Modernizr.csstransforms3d /* && false */ ){
    var flipButton = document.getElementById('card-flip');
flipButton.style.display = 'block';
    var cardContainer = document.getElementById('card-container');
    cardContainer.className = cardContainer.className + " threed";
    flipButton.addEventListener("click", flipfunction,false); // flipfunction toggles .flip class
}

CSS在jsfiddle上

Answer 1

只有在父class='back'元素具有#card的情况下，才能通过设置class='flip'元素的过渡来避免卡片在页面加载时的翻转效果。

在页面加载时，class='flip'将不存在，因此不会应用效果。

从

更改代码

.threed #card .card-surface{
    background-color:$base-white;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 280px;
    height: 180px;
    padding:10px;
}

到

.threed #card .front{ /* This is to apply the transition to the front element */
    background-color:$base-white;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 280px;
    height: 180px;
    padding:10px;
}
.threed #card.flip .back{ /* This is to apply transition to the back element only when parent has flip class */
    background-color:$base-white;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 280px;
    height: 180px;
    padding:10px;
}

Demo

隐藏初始的3D变换动画

1 个答案: