时间戳

首页 > 解决方案 > 添加了第二个css动画但没有产生效果

javascript - 添加了第二个css动画但没有产生效果

问题描述

我有一个菜单按钮和一个菜单，有 1 个已知错误：

错误：其中一个事件mouseleave在菜单框上，它应该添加一个dropDownMenuPulsate已应用但不起作用的类，我被迫!important在 css 动画声明中使用，为什么？

要重现此错误：单击菜单按钮，将鼠标放在菜单上然后退出（不要返回），等待...在 2 秒内它会应用动画（如果!important使用），然后 4 秒后菜单按预期关闭。

var menuAutoHideTimeoutId = '';
var menuAutoWarningTimeoutId = '';
// dropdown menu button click
$("#dropDownMenuBtn").on("click", function(){
  event.stopPropagation();
    if($("#dropDownMenuWrap").css("opacity") == 0){
      $("#dropDownMenuWrap").removeClass('dropDownMenuWrapHideAnimation').addClass('dropDownMenuWrapShowAnimation');
    }else{
      $("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
       if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
          $("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
          window.clearTimeout(menuAutoWarningTimeoutId);
          window.clearTimeout(menuAutoHideTimeoutId);
       } 
    }
});

$(".dropDownMenuLinkWrap").on("click", function(){
  console.log('page render');
    // avoid menu hide to fire when click click outside menu wrap
    event.stopPropagation();
})

// dropdown menu hide on click outside menu wrap 
$(document).on("click", function(){
  if($("#dropDownMenuBtn:hover").length == 0){
    if($("#dropDownMenuWrap").css("opacity") == 1){
      $("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
    }
  }
});

$("#dropDownMenuWrap").on("mouseleave", function(){
  // add class showing pulsating effect as warning of closing soon
  menuAutoWarningTimeoutId = setTimeout(function(){ 
    if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
      $("#dropDownMenuWrap").addClass('dropDownMenuPulsate');
    } 
  }, 2000);
  menuAutoHideTimeoutId = setTimeout(function(){ 
    // add closing animation and remove others
    if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
      $("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation dropDownMenuPulsate').addClass('dropDownMenuWrapHideAnimation');
    } 
  }, 6000);
})

//mouse re enter cancel mouseout event
$("#dropDownMenuWrap").on("mouseenter", function(){
  window.clearTimeout(menuAutoWarningTimeoutId);
  window.clearTimeout(menuAutoHideTimeoutId);
  if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){      
     $("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
  } 
})
.dropDownMenuPulsate{
  /*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
  /*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
  /*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
  /*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
  /*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
  /*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
  animation: pulsateAnimation .2s linear infinite !important;
}
@keyframes pulsateAnimation {
  0% { transform: rotate(10deg); }
  33% { transform: rotate(0deg); }
  66% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
#dropDownMenuBtn {
    cursor: pointer;
    position: fixed;
    top: 3px;
    right: 20px;
    font-size: xx-large;
    color: #f997bb;
}
#dropDownMenuBtn:hover {
    color: lightgrey;
}
.dropDownMenuWrapInitial{
  position: fixed;
  z-index: 99;
  top: 60px;
  background: white;
  border: 1px solid lightgrey;
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  pointer-events :none;
  right:-300px;
  opacity: 0;
}
.dropDownMenuWrapShowAnimation{
  pointer-events :auto;
  opacity:1;
  right:10px;
  transform-origin: top right;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;

  animation: .2s ease 1 linkMenuShowAnimation;
  -webkit-animation: .2s ease 1 linkMenuShowAnimation;
}

@-webkit-keyframes linkMenuShowAnimation {
  0%{
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  100%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes linkMenuShowAnimation {
  0%{
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  100%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

.dropDownMenuWrapHideAnimation{
  pointer-events :none;
  opacity:0;
  right:-300px;
  transform-origin: top right;
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;

  animation: .2s ease 1 linkMenuHideAnimation;
  -webkit-animation: .2s ease 1 linkMenuHideAnimation; 
}

@-webkit-keyframes linkMenuHideAnimation {
  0%{
    right:10px;
    opacity:1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%{
    right:10px;
    opacity:1;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
@keyframes linkMenuHideAnimation {
  0%{
    right:10px;
    opacity:1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%{
    right:10px;
    opacity:1;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <div id="dropDownMenuBtn">
    Menu button
  </div>
  
  <div id="dropDownMenuWrap" class="dropDownMenuWrapInitial">
      <div class="dropDownMenuLinkWrap">
        <p class="dropDownMenuLinkText">Link 1</p>
      </div>
      <div class="dropDownMenuLinkWrap">
        <p class="dropDownMenuLinkText">Link 2</p>
      </div>
      <div class="dropDownMenuLinkWrap">      
        <p class="dropDownMenuLinkText">Link 3</p>
      </div>
  </div>
</div>

标签： javascriptjquerycss

解决方案

发生这种情况是因为元素具有三个类，其中 2 个包含动画。在这种情况下，将遵循 css 文件中的顺序。由于您将 dropDownMenuPulsatefirst 和dropDownMenuWrapShowAnimationsecond 放在 css 文件中，因此动画dropDownMenuWrapShowAnimation将覆盖的动画dropDownMenuPulsate（您可以在元素检查器中看到它）。

修复

将块移动到 css 文件中的dropDownMenuPulsate块下方dropDownMenuWrapShowAnimation，如您在此处看到的。

var menuAutoHideTimeoutId = '';
var menuAutoWarningTimeoutId = '';
// dropdown menu button click
$("#dropDownMenuBtn").on("click", function(){
  event.stopPropagation();
    if($("#dropDownMenuWrap").css("opacity") == 0){
      $("#dropDownMenuWrap").removeClass('dropDownMenuWrapHideAnimation').addClass('dropDownMenuWrapShowAnimation');
    }else{
      $("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
       if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
          $("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
          window.clearTimeout(menuAutoWarningTimeoutId);
          window.clearTimeout(menuAutoHideTimeoutId);
       } 
    }
});

$(".dropDownMenuLinkWrap").on("click", function(){
  console.log('page render');
    // avoid menu hide to fire when click click outside menu wrap
    event.stopPropagation();
})

// dropdown menu hide on click outside menu wrap 
$(document).on("click", function(){
  if($("#dropDownMenuBtn:hover").length == 0){
    if($("#dropDownMenuWrap").css("opacity") == 1){
      $("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
    }
  }
});

$("#dropDownMenuWrap").on("mouseleave", function(){
  // add class showing pulsating effect as warning of closing soon
  menuAutoWarningTimeoutId = setTimeout(function(){ 
    if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
      $("#dropDownMenuWrap").addClass('dropDownMenuPulsate');
    } 
  }, 2000);
  menuAutoHideTimeoutId = setTimeout(function(){ 
    // add closing animation and remove others
    if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
      $("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation dropDownMenuPulsate').addClass('dropDownMenuWrapHideAnimation');
    } 
  }, 6000);
})

//mouse re enter cancel mouseout event
$("#dropDownMenuWrap").on("mouseenter", function(){
  window.clearTimeout(menuAutoWarningTimeoutId);
  window.clearTimeout(menuAutoHideTimeoutId);
  if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){      
     $("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
  } 
})
@keyframes pulsateAnimation {
  0% { transform: rotate(10deg); }
  33% { transform: rotate(0deg); }
  66% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
#dropDownMenuBtn {
    cursor: pointer;
    position: fixed;
    top: 3px;
    right: 20px;
    font-size: xx-large;
    color: #f997bb;
}
#dropDownMenuBtn:hover {
    color: lightgrey;
}
.dropDownMenuWrapInitial{
  position: fixed;
  z-index: 99;
  top: 60px;
  background: white;
  border: 1px solid lightgrey;
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  pointer-events :none;
  right:-300px;
  opacity: 0;
}
.dropDownMenuWrapShowAnimation{
  pointer-events :auto;
  opacity:1;
  right:10px;
  transform-origin: top right;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;

  animation: .2s ease 1 linkMenuShowAnimation;
  -webkit-animation: .2s ease 1 linkMenuShowAnimation;
}
.dropDownMenuPulsate{
  /*ANIMATION Works without !important
  ¯\_(ツ)_/¯
  */
  animation: pulsateAnimation .2s linear infinite;
}
@-webkit-keyframes linkMenuShowAnimation {
  0%{
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  100%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes linkMenuShowAnimation {
  0%{
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  100%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

.dropDownMenuWrapHideAnimation{
  pointer-events :none;
  opacity:0;
  right:-300px;
  transform-origin: top right;
  -webkit-transform-origin: top right;
      -ms-transform-origin: top right;

  animation: .2s ease 1 linkMenuHideAnimation;
  -webkit-animation: .2s ease 1 linkMenuHideAnimation; 
}

@-webkit-keyframes linkMenuHideAnimation {
  0%{
    right:10px;
    opacity:1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%{
    right:10px;
    opacity:1;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
@keyframes linkMenuHideAnimation {
  0%{
    right:10px;
    opacity:1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%{
    right:10px;
    opacity:1;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <div id="dropDownMenuBtn">
    Menu button
  </div>
  
  <div id="dropDownMenuWrap" class="dropDownMenuWrapInitial">
      <div class="dropDownMenuLinkWrap">
        <p class="dropDownMenuLinkText">Link 1</p>
      </div>
      <div class="dropDownMenuLinkWrap">
        <p class="dropDownMenuLinkText">Link 2</p>
      </div>
      <div class="dropDownMenuLinkWrap">      
        <p class="dropDownMenuLinkText">Link 3</p>
      </div>
  </div>
</div>

参考
只是个人意见，你确定要在页面中显示这样的动画吗？

推荐阅读