Добавление эффекта слайда в выпадающий список начальной загрузки

Я использую начальную загрузку и хочу добавить анимацию в выпадающий Я хочу добавить к нему анимацию, скользить вниз и назад при выходе из нее. Как я мог это сделать?

Вещи, которые я пробовал:

Изменение выпадающего файла Js следующим образом:

Как плавно перемещать выпадающий список Bootstrap вверх и вниз?

70 голосов | спросил Ben Beri 24 PM000000110000005331 2012, 23:56:53

12 ответов


0

Если вы обновитесь до Bootstrap 3 (BS3), они выявят множество событий Javascript, в которые приятно связать желаемую функциональность. В BS3 этот код даст всем вашим выпадающим меню эффект анимации, который вы ищете:

  // Add slideDown animation to Bootstrap dropdown when expanding.
  $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

Вы можете прочитать о событиях BS3 здесь и, в частности, о выпадающих событиях здесь .

ответил cogell 13 +04002013-10-13T01:01:34+04:00312013bEurope/MoscowSun, 13 Oct 2013 01:01:34 +0400 2013, 01:01:34
0

Также можно избежать использования JavaScript для эффекта выпадающего списка и использовать переход CSS3, добавив этот небольшой фрагмент кода в свой стиль:

.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;
}

Единственная проблема, связанная с этим способом, заключается в том, что вы должны вручную указать максимальную высоту. Если вы установите очень большое значение, ваша анимация будет очень быстрой.

Это работает как шарм, если вы знаете приблизительную высоту выпадающих меню, в противном случае вы все равно можете использовать javascript, чтобы установить точное значение максимальной высоты.

Вот небольшой пример: DEMO


! В этом решении есть небольшая ошибка с отступом, проверьте комментарий Джейкоба Стамма с решением.

ответил MadisonTrash 26 PM00000080000004231 2015, 20:31:42
0

Я делаю что-то подобное, но при наведении мыши, а не по щелчку .. Это код, который я использую, возможно, вы сможете немного его настроить, чтобы он работал при нажатии

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});
ответил Yohn 3 62012vEurope/Moscow11bEurope/MoscowSat, 03 Nov 2012 06:36:10 +0400 2012, 06:36:10
0

Я не знаю, смогу ли я поднять этот поток, но я нашел быстрое решение для визуальной ошибки, которая возникает, когда открытый класс удаляется слишком быстро. По сути, все, что нужно сделать, это добавить функцию OnComplete внутри события slideUp и сбросить все активные классы и атрибуты. Идет примерно так:

Вот результат: Пример загрузки

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('show');
            $('.dropdown-menu').removeClass('show');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});
ответил IndieRok 10 MarpmTue, 10 Mar 2015 17:54:26 +03002015-03-10T17:54:26+03:0005 2015, 17:54:26
0

вот мое решение для слайдов & эффект затухания:

   // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });
ответил Vedmant 22 J0000006Europe/Moscow 2014, 23:18:48
0

По клику это можно сделать с помощью кода ниже

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').slideToggle(500);
});
ответил Abhimanyu Rana 4 Maypm13 2013, 23:25:24
0

Я использую приведенный выше код, но я изменил эффект задержки с помощью slideToggle.

Он перемещает раскрывающийся список при наведении курсора мышью.

$('.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)
    });
ответил Augusto Triste 11 Mayam13 2013, 03:16:41
0

Расширенный ответ, был мой первый ответ, так что извините, если раньше не было достаточно деталей.

Для Bootstrap 3.x я лично предпочитаю CSS-анимацию, и я использую animate.css & вместе с Bootstrap Dropdown Javascript Hooks. Хотя это может не дать того эффекта, который вам нужен, это довольно гибкий подход.

Шаг 1: добавьте animate.css на свою страницу с тегами head:

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

Шаг 2 . Используйте стандартный HTML-код начальной загрузки для триггера:

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

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

Шаг 3: Затем добавьте 2 пользовательских атрибута данных в элемент dropdrop-menu; раскрывающийся список данных для анимации in и раскрывающийся список данных для анимации out. Это могут быть любые эффекты animate.css, такие как fadeIn или fadeOut

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

Шаг 4. Затем добавьте следующий Javascript, чтобы прочитать атрибуты данных drop-in-out /out и отреагировать на перехваты /события Bootstrap Javascript API ( 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');
      }); 
    }    
  }, 
});

Шаг 5 (необязательно): если вы хотите ускорить или изменить анимацию, вы можете сделать это с помощью CSS, как показано ниже:

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

Написал статью с более подробной информацией и загрузкой, если кому-то интересно: статья: http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

Надеюсь, что это полезно & эта вторая статья имеет уровень детализации, который необходим Том

ответил Tom James 4 Jpm1000000pmMon, 04 Jan 2016 13:07:33 +030016 2016, 13:07:33
0

Обновление 2018 Bootstrap 4

В Boostrap 4 класс .open был заменен на .show. Я хотел реализовать это, используя только переходы CSS без необходимости в дополнительном JS или jQuery ...

.show > .dropdown-menu {
  max-height: 900px;
  visibility: visible;
}

.dropdown-menu {
  display: block;
  max-height: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

Демонстрация: https://www.codeply.com/go/3i8LzYVfMF

Примечание. Для max-height можно задать любое большое значение, достаточное для размещения раскрывающегося содержимого.

ответил Zim 25 PM00000070000000731 2018, 19:00:07
0
$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
}, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

Этот код работает, если вы хотите раскрывать выпадающие списки при наведении.

Я только что изменил .slideToggle на .slideDown & .slideUp и удалил (400) хронометраж

ответил ChapDaddy65 24 AMpThu, 24 Apr 2014 00:05:27 +040005Thursday 2014, 00:05:27
0

BOOTSTRAP 3 СПРАВОЧНИК

Добавил, потому что меня все время ловит решение в этой теме, и оно каждый раз меня заполняет.

По сути, раскрывающийся список BS немедленно удаляет класс .open из родительского элемента, поэтому скольжение вверх не работает.

Используйте тот же бит, что и другие решения для slideDown ();

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  e.preventDefault();
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
    $(this).parent().removeClass('open');
  });
});
ответил Slipoch 8 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 08 Sep 2018 07:20:00 +0300 2018, 07:20:00
0

Вот хорошее простое решение с использованием jQuery, которое прекрасно работает:

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

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

Переключение анимации слайдов происходит при нажатии, и оно всегда сдвигается назад при потере фокуса.

Измените значение 300 на любое значение. Чем меньше значение, тем быстрее анимация.

Edit:

Это решение будет работать только для представлений на рабочем столе. Это потребует некоторых дальнейших изменений для того, чтобы красиво отображаться для мобильных устройств.

ответил Barry Michael Doyle 26 FebruaryEurope/MoscowbSun, 26 Feb 2017 16:22:36 +0300000000pmSun, 26 Feb 2017 16:22:36 +030017 2017, 16:22:36

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132