impulsora desplegable-menu flickering cuando se alejan

Tengo un minicart modal que cuando usted salta sobre él, parece bien. Pero cuando te largas, hay un parpadeo que se destella y sale y no está seguro de cómo arreglarlo.

He actualizado el código para incluir más de la estructura del menú html y un CSS completo del estilo del menú desplegable.

El sitio demo se puede encontrar aquí - https:// whileymai-dev.myshopify.com/password PW para acceder es - demostore2020

Aquí está el html

        

          
    
            
  • 
              
              
            
    •

aquí está el CSS

/*=================================================================
  Navbar Dropdown
==================================================================*/
.navbar-nav .dropdown .dropdown-menu a {
  color: #222;
  font-size: 12px;
  border: 1px solid transparent;
  display: block;
  padding: 8px 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: .3s all;
}

.navbar-nav .dropdown .dropdown-menu a:hover {
  background-color: #000;
  color: #fff;
}

.dropdown-item-text {
    display: block;
    padding: 0.5rem 0.5rem;
    color: #212529;
}

.dropdown:hover .dropdown-menu {
  display: none;
  opacity: 1;
  display: block;
  visibility: visible;
  color: #777;
  top: -10px;
  right: -76px;
  max-height: 500px;
  height: 500px;
  overflow: scroll;
  -webkit-animation: fadeIn 0.7s;
  animation: fadeIn 0.7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.dropdown .dropdown-menu {
  border-radius: 0;
  padding: 15px;
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: .3s all;
  position: absolute;
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(0px);
          transform: translateY(00px);
  transition: visibility 0.2s, opacity 0.2s, -webkit-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
  transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
  transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99),
  -webkit-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
}

.dropdown .dropdown-menu.full-width {
  max-width: 1200px;
  left: -150px;
  top: 35px;
  border: 0;
  width: max-content;
}

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}

.dropdown-divider {
  height: 0;
  margin: 0;
  overflow: hidden;
  border-top: 0px solid #e9ecef;
}

Pregunta hecha hace 3 años, 4 meses, 28 días - Por techtactician

3 Respuestas:

  • Se me ocurrió esto - tenía 2 clases de CSS; causando el problema que he eliminado.

    arriba: -10px; derecho: -76px;

    Respondida el Dec 18, 2020 a las 08:25 - por pixelprodigy

    Votos positivos: 0 | Votos negativos: 0

  • El parpadeo que experimentas al alejarte del minicart modal puede ser causado por la transición entre el estado de mostrar y ocultar el menú desplegable. Parece que en tu CSS, estás aplicando una transición de opacidad y visibilidad al menú desplegable cuando el cursor se sitúa sobre el elemento padre. Sin embargo, estas propiedades pueden estar causando el parpadeo al intentar cambiar rápidamente entre los estados.

    Una solución sería revisar y simplificar las transiciones que estás aplicando al menú desplegable. Aquí hay algunas sugerencias:

    • Elimina la transición de visibilidad y la transición de opacidad de forma separada. Puedes combinar ambas transiciones en una sola línea. Por ejemplo:
    css
transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
    • Evita aplicar múltiples transiciones a la misma propiedad en diferentes líneas. En tu CSS, estás aplicando la transición a la propiedad `transform` en dos líneas separadas, lo cual puede causar conflictos. Combina ambas en una sola línea como se muestra arriba.
    • Revisa la lógica de tu CSS para asegurarte de que la transición se esté activando y desactivando correctamente al interactuar con el menú desplegable.

    Realizando estos ajustes, deberías poder reducir o eliminar el parpadeo al alejarte del minicart modal. Te recomendaría probar estos cambios y ajustes para ver si resuelven el problema.

    Respondida el Dec 19, 2020 a las 08:25 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema: El menú desplegable mini-cart parpadea cuando el cursor se aleja de él.

    Causas posibles:

    El CSS para el estado :hover del menú desplegable no se está revirtiendo correctamente cuando el cursor se aleja. Hay un retraso en la eliminación de la clase :hover del menú desplegable. Existe un conflicto con otro CSS o script que afecta al menú desplegable.

    Solución:

    1. Comprueba el CSS de estado :hover

    Asegúrate de que el CSS para el estado :hover del menú desplegable se está revirtiendo correctamente cuando el cursor se aleja. Esto significa que las propiedades como background-color y color deben volver a sus valores predeterminados cuando el cursor ya no esté sobre el menú desplegable.

    2. Elimina la clase :hover

    Intenta eliminar la clase :hover del menú desplegable mediante JavaScript cuando el cursor se aleja. Esto garantizará que las propiedades CSS de estado :hover no permanezcan activas después de que el cursor haya abandonado el menú desplegable.

    3. Comprueba los conflictos de CSS/script

    Inspecciona el HTML y CSS de la página para detectar cualquier conflicto potencial con otro CSS o script que pueda afectar al menú desplegable. Desactiva temporalmente los scripts y estilos sospechosos para ver si resuelve el problema.

    4. Utiliza un plugin de menú desplegable

    Considera utilizar un plugin de menú desplegable de terceros que gestione la funcionalidad y el estilo del menú desplegable. Esto puede ayudar a evitar conflictos y garantizar un comportamiento uniforme.

    Código de ejemplo:

    JavaScript para eliminar la clase :hover:

    javascript
$(function() {
  $('.dropdown').on('mouseleave', function() {
    $(this).removeClass('hover');
  });
});

    Plugin de menú desplegable:

    JQuery UI Dropdown Bootstrap 5 Dropdown Select2

    Respondida el Dec 19, 2020 a las 08:38 - por Gemini

    Votos positivos: 0 | Votos negativos: 0