在页面加载时禁用css动画

Question

我想仅在页面加载时禁用css动画。

事情是，这个CSS动画是主导航菜单的菜单图标，但当在子页面上（其中还有一个子菜单存在）点击子菜单时，主菜单动画会激活 - 但我只希望它当我的主导航图标被点击时开始。我提供了html，javascript和css。

我很感谢您的支持。

HTML：

<div class="mcwrap"> 
    <input id="click" name="exit" type="checkbox"> 
    <label for="click"><span class="burger"></span></label>  
</div> 

的javascript：

$('.mcwrap label').on('click', function(){ 
     (!$('#click').prop('checked')) ? setTimeout(function(){opensLeft()}, 200) : setTimeout(function(){closesLeft()}, 200);    
}); 

function opensLeft() { 
    $("#sl").addClass('visible') 
    $("#swipe").addClass('isOpenLeft'); 
} 

function closesLeft() { 
    $("#sl").removeClass('visible') 
    $("#swipe").removeClass('isOpenLeft'); 
} 

CSS：

#sl.visible, #sr.visible { 
    display: block; 
} 
.mcwrap { 
    padding-top: 9px; 
} 
.mcwrap input { 
    display: none; 
} 
.mcwrap label { 
    position: relative; 
    width: 20px; 
    height: 30px; 
    display: block; 
    cursor: pointer; 
    background: transparent; 
} 
/* Exit Icon */ 
.mcwrap label:before, 
.mcwrap input:checked + label:before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    margin-top: -2px; 
    width: 30px; 
    height: 4px; 
    border-radius: 2px; 
    background: #fafafa; 
} 
.mcwrap label:before { 
    -webkit-animation: animationOneReverse 1s ease forwards; 
    animation: animationOneReverse 1s ease forwards; 
} 
@-webkit-keyframes animationOneReverse { 
    0% { 
    -webkit-transform: rotate(315deg); 
    } 
    25% { 
    -webkit-transform: rotate(360deg); 
    } 
    50%, 
    100% { 
    -webkit-transform: rotate(0deg); 
    } 
} 
@keyframes animationOneReverse { 
    0% { 
    transform: rotate(315deg); 
    } 
    25% { 
    transform: rotate(360deg); 
    } 
    50%, 
    100% { 
    transform: rotate(0deg); 
    } 
} 
.mcwrap input:checked + label:before { 
    -webkit-animation: animationOne 1s ease forwards; 
    animation: animationOne 1s ease forwards; 
} 
@-webkit-keyframes animationOne { 
    0%, 
    50% { 
    -webkit-transform: rotate(0deg); 
    } 
    75% { 
    -webkit-transform: rotate(360deg); 
    } 
    100% { 
    -webkit-transform: rotate(315deg); 
    } 
} 
@keyframes animationOne { 
    0%, 
    50% { 
    transform: rotate(0deg); 
    } 
    75% { 
    transform: rotate(360deg); 
    } 
    100% { 
    transform: rotate(315deg); 
    } 
} 
.mcwrap label:after, 
.mcwrap input:checked + label:after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    margin-top: -2px; 
    width: 30px; 
    height: 4px; 
    border-radius: 2px; 
    background: #fafafa; 
} 
.mcwrap label:after { 
    -webkit-animation: animationTwoReverse 1s ease forwards; 
    animation: animationTwoReverse 1 s ease forwards; 
} 
@-webkit-keyframes animationTwoReverse { 
    0% { 
    -webkit-transform: rotate(405deg); 
    } 
    25% { 
    -webkit-transform: rotate(450deg); 
    } 
    50%, 
    100% { 
    -webkit-transform: rotate(0deg); 
    } 
} 
@keyframes animationTwoReverse { 
    0% { 
    transform: rotate(405deg); 
    } 
    25% { 
    transform: rotate(450deg); 
    } 
    50%, 
    100% { 
    transform: rotate(0deg); 
    } 
} 
.mcwrap input:checked + label:after { 
    -webkit-animation: animationTwo 1s ease forwards; 
    animation: animationTwo 1s ease forwards; 
} 
@-webkit-keyframes animationTwo { 
    0%, 
    50% { 
    -webkit-transform: rotate(0deg); 
    } 
    75% { 
    -webkit-transform: rotate(450deg); 
    } 
    100% { 
    -webkit-transform: rotate(405deg); 
    } 
} 
@keyframes animationTwo { 
    0%, 
    50% { 
    transform: rotate(0deg); 
    } 
    75% { 
    transform: rotate(450deg); 
    } 
    100% { 
    transform: rotate(405deg); 
    } 
} 
/* Burger Icon */ 
.mcwrap label .burger:before { 
    content: ''; 
    position: absolute; 
    top: 4px; 
    width: 30px; 
    height: 4px; 
    border-radius: 2px; 
    background: #fafafa; 
    -webkit-animation: animationBurgerTopReverse 1s ease forwards; 
    animation: animationBurgerTopReverse 1s ease forwards; 
} 
@-webkit-keyframes animationBurgerTopReverse { 
    0%, 
    50% { 
    -webkit-transform: translateY(12px); 
    opacity: 0; 
    } 
    51% { 
    -webkit-transform: translateY(12px); 
    opacity: 1; 
    } 
    100% { 
    -webkit-transform: translateY(0px); 
    opacity: 1; 
    } 
} 
@keyframes animationBurgerTopReverse { 
    0%, 
    50% { 
    transform: translateY(12px); 
    opacity: 0; 
    } 
    51% { 
    transform: translateY(12px); 
    opacity: 1; 
    } 
    100% { 
    transform: translateY(0px); 
    opacity: 1; 
    } 
} 
.mcwrap input:checked + label .burger:before { 
    -webkit-animation: animationBurgerTop 1s ease forwards; 
    animation: animationBurgerTop 1s ease forwards; 
} 
@-webkit-keyframes animationBurgerTop { 
    0% { 
    -webkit-transform: translateY(0px); 
    opacity: 1; 
    } 
    50% { 
    -webkit-transform: translateY(12px); 
    opacity: 1; 
    } 
    51%, 
    100% { 
    -webkit-transform: translateY(12px); 
    opacity: 0; 
    } 
} 
@keyframes animationBurgerTop { 
    0% { 
    transform: translateY(0px); 
    opacity: 1; 
    } 
    50% { 
    transform: translateY(12px); 
    opacity: 1; 
    } 
    51%, 
    100% { 
    transform: translateY(12px); 
    opacity: 0; 
    } 
} 
.mcwrap label .burger:after { 
    content: ''; 
    position: absolute; 
    bottom: 4px; 
    width: 30px; 
    height: 4px; 
    border-radius: 2px; 
    background: #fafafa; 
    -webkit-animation: animationBurgerBottomReverse 1s ease forwards; 
    animation: animationBurgerBottomReverse 1s ease forwards; 
} 
@-webkit-keyframes animationBurgerBottomReverse { 
    0%, 
    50% { 
    -webkit-transform: translateY(-12px); 
    opacity: 0; 
    } 
    51% { 
    -webkit-transform: translateY(-12px); 
    opacity: 1; 
    } 
    100% { 
    -webkit-transform: translateY(0px); 
    opacity: 1; 
    } 
} 
@keyframes animationBurgerBottomReverse { 
    0%, 
    50% { 
    transform: translateY(-12px); 
    opacity: 0; 
    } 
    51% { 
    transform: translateY(-12px); 
    opacity: 1; 
    } 
    100% { 
    transform: translateY(0px); 
    opacity: 1; 
    } 
} 
.mcwrap input:checked + label .burger:after { 
    -webkit-animation: animationBurgerBottom 1s ease forwards; 
    animation: animationBurgerBottom 1s ease forwards; 
} 
@-webkit-keyframes animationBurgerBottom { 
    0% { 
    -webkit-transform: translateY(0px); 
    opacity: 1; 
    } 
    50% { 
    -webkit-transform: translateY(-12px); 
    opacity: 1; 
    } 
    51%, 
    100% { 
    -webkit-transform: translateY(-12px); 
    opacity: 0; 
    } 
} 
@keyframes animationBurgerBottom { 
    0% { 
    transform: translateY(0px); 
    opacity: 1; 
    } 
    50% { 
    transform: translateY(-12px); 
    opacity: 1; 
    } 
    51%, 
    100% { 
    transform: translateY(-12px); 
    opacity: 0; 
    } 
} 

Answer 1

添加在JS当文档被装载的类：

$(window).on('load', function(){ 
    $('body').addClass('loaded') 
}); 

然后在CSS：

.loaded .mcwrap label:before { 
    -webkit-animation: animationOneReverse 1s ease forwards; 
    animation: animationOneReverse 1s ease forwards; 
} 

重复这个例子中为每一个需要的load事件