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事件

的动画重复此示例

在页面加载时禁用css动画

1 个答案: