javascript - 隐藏初始 3d 变换动画

Question

我已经设置了动画卡片翻转 jsfiddle单击按钮时发生。它使用 Modernizr 进行设置以测试该功能，然后在该功能可用时启用 3d 样式。如果你按下运行按钮，你会看到后面板在页面加载时旋转 180 度，有没有办法禁用它？ 如果从一开始就设置样式，则不会发生这种情况，但我稍后会启用它们以实现兼容性(如果您在 javascript 中启用“&& false”，您将看到没有 3d 转换的浏览器的替代 View )。 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

只有当父级 #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