[javascript] Agregar un efecto de diapositiva al menú desplegable de arranque


Answers

También es posible evitar el uso de JavaScript para el efecto desplegable, y usar la transición CSS3, agregando este pequeño fragmento de código a su estilo:

.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.dropdown.open .dropdown-menu {
    max-height: 300px;
    opacity: 1;
}

El único problema de esta manera es que debe especificar manualmente la altura máxima. Si establece un valor muy grande, su animación será muy rápida.

Funciona como un amuleto si conoce la altura aproximada de sus menús desplegables, de lo contrario todavía puede usar javascript para establecer un valor preciso de altura máxima.

Aquí hay un pequeño ejemplo: DEMO

! Hay un pequeño error con el relleno en esta solución, verifique el comentario de Jacob Stamm con la solución.

Question

Estoy usando bootstrap , y me gustaría agregar animación a un menú desplegable.

Quiero agregarle una animación, deslizar hacia abajo y hacia atrás al salir de ella.

¿Cómo podría hacer esto?

Cosas que intenté:

Cambiando el archivo desplegable Js de esta manera:

¿Cómo puedo hacer que el menú desplegable de navegación de Bootstrap se deslice suavemente hacia arriba y hacia abajo?

¡Cualquier ayuda sería buena! ¡gracias!.




No sé si puedo topar con este hilo, pero descubrí una solución rápida para el error visual que ocurre cuando la clase abierta se elimina demasiado rápido. Básicamente, todo lo que hay que hacer es agregar una función OnComplete dentro del evento slideUp y restablecer todas las clases y atributos activos. Va algo así:

Aquí está el resultado: Ejemplo de Bootply

Javascript / Jquery:

$(function(){
    // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        e.preventDefault();
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
            //On Complete, we reset all active dropdown classes and attributes
            //This fixes the visual bug associated with the open class being removed too fast
            $('.dropdown').removeClass('open');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});



Aquí hay una buena solución simple usando jQuery que funciona muy bien:

$('.dropdown-toggle').click(function () {
    $(this).next('.dropdown-menu').slideToggle(300);
});

$('.dropdown-toggle').focusout(function () {
    $(this).next('.dropdown-menu').slideUp(300);
})

El alternar animación de diapositivas se produce al hacer clic y siempre se desliza una copia de seguridad al perder el foco.

Altere el valor 300 a cualquier cosa que desee, cuanto menor sea el número, más rápida será la animación.

Editar:

Esta solución solo funcionará para vistas de escritorio. Necesitará algunas modificaciones adicionales para mostrarse bien para dispositivos móviles.




Estoy usando el código anterior, pero he cambiado el efecto de retardo mediante slideToggle.

Desliza el menú desplegable al pasar el mouse sobre la animación.

$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400);
    }, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400)
    });



Respuesta expandida, fue mi primera respuesta, así que disculpe si no había suficiente detalle antes.

Para Bootstrap 3.x, personalmente prefiero las animaciones CSS y he estado usando animate.css y junto con los ganchos desplegables de Javascript de Bootstrap. Aunque podría no tener exactamente el efecto que busca, es un enfoque bastante flexible.

Paso 1: agrega animate.css a tu página con las etiquetas de encabezado:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

Paso 2: usa el código HTML estándar de Bootstrap en el desencadenador:

<div class="dropdown">
  <button type="button" data-toggle="dropdown">Dropdown trigger</button>

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Paso 3: A continuación, agregue 2 atributos de datos personalizados al elemento dropdrop-menu; datos desplegables para la animación y la lista desplegable de datos para la animación de salida. Estos pueden ser cualquier efecto animado.css como fadeIn o fadeOut

<ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
......
</ul>

Paso 4: A continuación, agregue el siguiente código JavaScript para leer los atributos de los datos desplegables de entrada / salida y reaccione a los enlaces / eventos de la API Javascript de Bootstrap ( http://getbootstrap.com/javascript/#dropdowns-events ):

var dropdownSelectors = $('.dropdown, .dropup');

// Custom function to read dropdown data
// =========================
function dropdownEffectData(target) {
  // @todo - page level global?
  var effectInDefault = null,
      effectOutDefault = null;
  var dropdown = $(target),
      dropdownMenu = $('.dropdown-menu', target);
  var parentUl = dropdown.parents('ul.nav'); 

  // If parent is ul.nav allow global effect settings
  if (parentUl.size() > 0) {
    effectInDefault = parentUl.data('dropdown-in') || null;
    effectOutDefault = parentUl.data('dropdown-out') || null;
  }

  return {
    target:       target,
    dropdown:     dropdown,
    dropdownMenu: dropdownMenu,
    effectIn:     dropdownMenu.data('dropdown-in') || effectInDefault,
    effectOut:    dropdownMenu.data('dropdown-out') || effectOutDefault,  
  };
}

// Custom function to start effect (in or out)
// =========================
function dropdownEffectStart(data, effectToStart) {
  if (effectToStart) {
    data.dropdown.addClass('dropdown-animating');
    data.dropdownMenu.addClass('animated');
    data.dropdownMenu.addClass(effectToStart);    
  }
}

// Custom function to read when animation is over
// =========================
function dropdownEffectEnd(data, callbackFunc) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  data.dropdown.one(animationEnd, function() {
    data.dropdown.removeClass('dropdown-animating');
    data.dropdownMenu.removeClass('animated');
    data.dropdownMenu.removeClass(data.effectIn);
    data.dropdownMenu.removeClass(data.effectOut);

    // Custom callback option, used to remove open class in out effect
    if(typeof callbackFunc == 'function'){
      callbackFunc();
    }
  });
}

// Bootstrap API hooks
// =========================
dropdownSelectors.on({
  "show.bs.dropdown": function () {
    // On show, start in effect
    var dropdown = dropdownEffectData(this);
    dropdownEffectStart(dropdown, dropdown.effectIn);
  },
  "shown.bs.dropdown": function () {
    // On shown, remove in effect once complete
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectIn && dropdown.effectOut) {
      dropdownEffectEnd(dropdown, function() {}); 
    }
  },  
  "hide.bs.dropdown":  function(e) {
    // On hide, start out effect
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectOut) {
      e.preventDefault();   
      dropdownEffectStart(dropdown, dropdown.effectOut);   
      dropdownEffectEnd(dropdown, function() {
        dropdown.dropdown.removeClass('open');
      }); 
    }    
  }, 
});

Paso 5 (opcional): si desea acelerar o modificar la animación, puede hacerlo con CSS de la siguiente manera:

.dropdown-menu.animated {
  /* Speed up animations */
  -webkit-animation-duration: 0.55s;
  animation-duration: 0.55s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

Escribió un artículo con más detalles y una descarga si alguien está interesado: artículo: http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

Espero que sea útil y este segundo informe tenga el nivel de detalle que se necesita Tom




Related