javascript - 鼠标离开动画

Question

此刻我正在为 CSS 动画而苦苦挣扎。

问题是我有一个入口点 div，它有自己的缩放动画，另一个 div 扩展并显示文本，几秒钟后再次折叠（我已经实现了这一点）。

主要问题是当用户悬停入口点时需要再次执行所有这些操作，当这种情况发生时，我们有 2 个步骤。

1. 悬停并再次显示文本。
2. 当鼠标离开时，几秒钟后再次折叠文本。

这是我的代码https://codepen.io/Arm144/pen/JjRWoXQ

HTML：

 <div id="chatbotEntryPoint">
    <i>
      <img class="entry_point_icon" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjJweCIgaGVpZ2h0PSI2MnB4IiB2aWV3Qm94PSIwIDAgNjIgNjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDY0ICg5MzUzNykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+RW50cnktcG9pbnQtcm91bmRAM3g8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8Y2lyY2xlIGlkPSJwYXRoLTEiIGN4PSIyOCIgY3k9IjI4IiByPSIyOCI+PC9jaXJjbGU+CiAgICAgICAgPGZpbHRlciB4PSItOS44JSIgeT0iLTYuMiUiIHdpZHRoPSIxMTkuNiUiIGhlaWdodD0iMTE5LjYlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjIiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC40NjI3NDUwOTggICAwIDAgMCAwIDAuNDYyNzQ1MDk4ICAgMCAwIDAgMCAwLjQ2Mjc0NTA5OCAgMCAwIDAgMC43IDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSI1Li0tRW50cnktUG9pbnQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJ3ZWJfRW50cnlQb2ludC0vY29tcHJlc3NlZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzNDkuMDAwMDAwLCAtNTg2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iRW50cnktcG9pbnQtcm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzNTIuMDAwMDAwLCA1ODcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iT3ZhbC1Db3B5LTMiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSIjMUJCM0JDIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM1Ljk2NDg0MzcsMTkgTDIwLjAzODQxMTUsMTkgQzE3LjgxMTg0ODksMTkgMTYsMjAuNzgyODk3OSAxNiwyMi45NzQ2NzA0IEwxNiwzMi4wODc4Mjk2IEMxNiwzNC4yNjY3ODQ2IDE3Ljc5MTAxNTYsMzYuMDQxOTkyMiAyMCwzNi4wNjI1IEwyMCwzOS4zNDM3NSBDMjAsMzkuNjA5MDY5OCAyMC4xNjIxMDkzLDM5Ljg0ODc1NDkgMjAuNDExNDU4NCwzOS45NTAwMTIzIEMyMC40OTQxNDA3LDM5Ljk4MzMzNzQgMjAuNTgwNzI5Miw0MCAyMC42NjY2NjY3LDQwIEMyMC44Mzk4NDM3LDQwIDIxLjAxMDQxNjcsMzkuOTMzMzQ5NyAyMS4xMzgwMjA4LDM5LjgwNzczOTIgTDI0Ljk0MjcwODMsMzYuMDYyNSBMMzUuOTYxNTg4NSwzNi4wNjI1IEMzOC4xODgxNTExLDM2LjA2MjUgNDAsMzQuMjc5NjAyMSA0MCwzMi4wODc4Mjk2IEw0MCwyMi45NzIxMDcgQzQwLDIwLjc4MTYxNjIgMzguMTkwMTA0MSwxOSAzNS45NjQ4NDM3LDE5IFogTTM4LjY2NjY2NjcsMzIuMDg3ODI5NiBDMzguNjY2NjY2NywzMy41NTU0MiAzNy40NTMxMjUxLDM0Ljc1IDM1Ljk2MTU4ODUsMzQuNzUgTDI0LjY2NjY2NjcsMzQuNzUgQzI0LjQ4OTU4MzMsMzQuNzUgMjQuMzIwMzEyNSwzNC44MTkyMTM5IDI0LjE5NTMxMjUsMzQuOTQyMjYwOCBMMjEuMzMzMzMzMywzNy43NTk1MjE2IEwyMS4zMzMzMzMzLDM1LjQwNjI1IEMyMS4zMzMzMzMzLDM1LjA0MzUxODEgMjEuMDM1MTU2MywzNC43NSAyMC42NjY2NjY3LDM0Ljc1IEwyMC4wMzg0MTE1LDM0Ljc1IEMxOC41NDY4NzQ5LDM0Ljc1IDE3LjMzMzMzMzMsMzMuNTU1NDIgMTcuMzMzMzMzMywzMi4wODc4Mjk2IEwxNy4zMzMzMzMzLDIyLjk3NDY3MDQgQzE3LjMzMzMzMzMsMjEuNTA3MDggMTguNTQ2ODc0OSwyMC4zMTI1IDIwLjAzODQxMTUsMjAuMzEyNSBMMzUuOTY0ODQzNywyMC4zMTI1IEMzNy40NTQ0MjcxLDIwLjMxMjUgMzguNjY2NjY2NywyMS41MDU3OTg0IDM4LjY2NjY2NjcsMjIuOTcyMTA3IEwzOC42NjY2NjY3LDMyLjA4NzgyOTYgWiIgaWQ9IlNoYXBlLUNvcHktMyIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" />
  </i>
  <span class="entry_point_text">Some text to show</span>
</div>

SCSS：

#chatbotEntryPoint {
    display: block;
    position: fixed;
    width: 60px;
    height: 60px;
    z-index: 1200;
    border-radius: 50px;
    background-color: purple;
    cursor: pointer; 
    line-height: 1.4;

    i {
      float: right;
      display: block;

      .entry_point_icon {
        width: 60px;
        height: 60px;
      }
    }


    .entry_point_text {
      color: #fff;
      font-size: 15px;
      padding: 20px;
      width: 300px;
      display: inline-block;
      overflow: hidden;
      vertical-align: middle;
    }
  
    &.reveal_text{
      animation: text_expand .3s linear .5s forwards,
      text_expand .3s linear 3s reverse forwards;
      
      .entry_point_icon {
        animation: reveal .2s linear forwards, reveal_resize .2s linear 1s reverse forwards, reveal_resize .2s linear 3s forwards;
      }
    }
  
  &.reveal_text_hover{
    animation: text_expand .3s linear .5s forwards;
      
      .entry_point_icon {
        animation: reveal_resize .2s linear 1s reverse forwards;
      }
  }
  
  &.reveal_text_leave{
    animation: text_expand .3s linear .5s reverse forwards;
      
      .entry_point_icon {
        animation: reveal_resize .2s linear 3s forwards;
      }

      .entry_point_text {
        opacity: 1;
      }
  }
}

@keyframes reveal {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes text_expand {
  0% {
    width: 60px;
  }

  100% {
    width: 400px;
  }
}

@keyframes reveal_resize {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

JS

var initEntryPoint = function(){
  var entryPoint = document.getElementById('chatbotEntryPoint');
  entryPoint.classList.add('reveal_text');
  entryPoint.addEventListener('mouseenter', function(){
    if( entryPoint.classList.contains('reveal_text')){
      entryPoint.classList.remove('reveal_text');
    } else {
      entryPoint.classList.remove('reveal_text_leave');
    }
    setTimeout(function(){
      entryPoint.classList.add('reveal_text_hover');           
    },10);
  });
   entryPoint.addEventListener('mouseleave', function(){
     setTimeout(function(){
        entryPoint.classList.remove('reveal_text_hover');
        entryPoint.classList.add('reveal_text_leave');
     }, 3000);
  });
};

setTimeout(function(){
  initEntryPoint();
}, 1000);

如果有人对如何使文本再次顺利折叠有任何线索，并且当再次悬停重做这一切时，我真的很感激。

非常感谢您的参与。

标签： javascriptcssanimation