БЛОГ НА HUSL


Как сделать плавное выпадание дроп-дауна?

Автор вопроса: aromachfrome

есть 3 языка, при клике анимируется стрелка и выпадает дроп-даун, но как бы не старался - он выпадает без анимаций

$(document).ready(function() {
  $(".lang-dropdown-btn").click(function() {
    $(".lang-dropdown-list").toggleClass("active");
    $(this).toggleClass("active");
  });

  // Закрытие дроп-дауна при клике вне его
  $(document).mouseup(function(e) {
    var container = $(".lang-dropdown");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(".lang-dropdown-list").removeClass("active");
      $(".lang-dropdown-btn").removeClass("active");
    }
  });
});
body {background-color: #aaa;}

.lang-dropdown {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1200;
}

.lang-dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.lang-name {
  margin-right: 10px;
  color: #fff;
}

.lang-arrow {
  transition: transform 0.3s ease-in;
  color: #d1d1d1;
}

.lang-dropdown-btn.active .d-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-list {
  display: none;
  position: absolute;
  background-color: #00000050;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.lang-dropdown-list.active {
  display: block;
  opacity: 1;
}

.lang-dropdown-item {
  padding: 10px;
  color: #fff;
  text-decoration: none;
  display: block;
  transition: background 0.3s;
}

.lang-dropdown-item:hover {
  background: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="lang-dropdown">
  <button class="lang-dropdown-btn">
    <span class="lang-name">РУС</span>
    <i class="fas fa-chevron-down d-arrow lang-arrow"></i>
  </button>
  <div class="lang-dropdown-list">
    <a href="#" class="lang-dropdown-item">РУССКИЙ</a>
    <a href="#" class="lang-dropdown-item">ENGLISH</a>
    <a href="#" class="lang-dropdown-item">ҚАЗАҚША</a>
  </div>
</div>


Источник

Ответы (3 шт):

Автор решения: Максим

как я вижу вы анимируете прозрачность

.lang-dropdown-list.active {
  display: block;
  opacity: 1;
}

но opacity и так по умолчанию равняется 1 вам стоит блоку сначала придать другое значение к примеру opacity: 0,5; и после уже значение поменять на opacity: 1; так как нужен именно переход от одного состояния к другому

→ Ссылка
Автор решения: BlackStar1991

Состояние display:none; в display:block; не анимируються, это мгновенное действие. Вот то что вы пытаетесь сделать. Стили и js у вас оформленны не очень корректно, но идею я вроде как передал.

$(document).ready(function () {
  $(".lang-dropdown-btn").click(function () {
    $(".lang-dropdown-list").toggleClass("active");
    $(this).toggleClass("active");
  });

  $(document).mouseup(function (e) {
    var container = $(".lang-dropdown");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(".lang-dropdown-list").removeClass("active");
      $(".lang-dropdown-btn").removeClass("active");
    }
  });
});
body {
  margin: 0;
  background-color: #000;
}

.lang-dropdown {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1200;
}

.lang-dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.lang-name {
  margin-right: 10px;
  color: #fff;
}

.lang-arrow {
  transition: transform 0.3s ease-in;
  color: #d1d1d1;
}

.lang-dropdown-btn.active .d-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-list {
  position: absolute;
  top: 100%;
  left:1000%;
  background-color: #00000050;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.lang-dropdown-list.active {
  top: 20px;
  left:0;
  opacity: 1;
}

.lang-dropdown-item {
  padding: 10px;
  color: #fff;
  text-decoration: none;
  display: block;
  transition: background 0.3s;
}

.lang-dropdown-item:hover {
  background: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lang-dropdown">
   <button class="lang-dropdown-btn">
     <span class="lang-name">РУС</span>
     <i class="fas fa-chevron-down d-arrow lang-arrow"></i>
   </button>
   <div class="lang-dropdown-list">
     <a href="#" class="lang-dropdown-item">РУССКИЙ</a>
     <a href="#" class="lang-dropdown-item">ENGLISH</a>
     <a href="#" class="lang-dropdown-item">ҚАЗАҚША</a>
   </div>
 </div>

→ Ссылка
Автор решения: De.Minov

Если используете jQuery, то можете использовать анимацию оттуда.

Вот вариант с плавным появлением .fadeIn()/.fadeOut()

$(document).ready(function() {
  $(".lang-dropdown-btn").click(function() {
    $(".lang-dropdown-list").fadeIn(500);
    $(this).toggleClass("active");
  });

  // Закрытие дроп-дауна при клике вне его
  $(document).mouseup(function(e) {
    var container = $(".lang-dropdown");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(".lang-dropdown-list").fadeOut(500, function() {
        $(".lang-dropdown-btn").removeClass("active");
      });
    }
  });
});
body {background-color: #ccc;}

.lang-dropdown {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1200;
}

.lang-dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.lang-name {
  margin-right: 10px;
  color: #fff;
}

.lang-arrow {
  transition: transform 0.3s ease-in;
  color: #d1d1d1;
}

.lang-dropdown-btn.active .d-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-list {
  display: none;
  position: absolute;
  background-color: #00000050;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  margin-top: 5px;
}

.lang-dropdown-list.active {
  display: block;
  opacity: 1;
}

.lang-dropdown-item {
  padding: 10px;
  color: #fff;
  text-decoration: none;
  display: block;
  transition: background 0.3s;
}

.lang-dropdown-item:hover {
  background: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="lang-dropdown">
  <button class="lang-dropdown-btn">
    <span class="lang-name">РУС</span>
    <i class="fas fa-chevron-down d-arrow lang-arrow"></i>
  </button>
  <div class="lang-dropdown-list">
    <a href="#" class="lang-dropdown-item">РУССКИЙ</a>
    <a href="#" class="lang-dropdown-item">ENGLISH</a>
    <a href="#" class="lang-dropdown-item">ҚАЗАҚША</a>
  </div>
</div>

Или вариант с "выдвижением" .slideDown()/.slideUp()

$(document).ready(function() {
  $(".lang-dropdown-list").slideUp(0); // fix anim

  $(".lang-dropdown-btn").click(function() {
    $(".lang-dropdown-list").slideDown(500);
    $(this).toggleClass("active");
  });

  // Закрытие дроп-дауна при клике вне его
  $(document).mouseup(function(e) {
    var container = $(".lang-dropdown");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(".lang-dropdown-list").slideUp(500, function() {
        $(".lang-dropdown-btn").removeClass("active");
      });
    }
  });
});
body {background-color: #ccc;}

.lang-dropdown {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1200;
}

.lang-dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.lang-name {
  margin-right: 10px;
  color: #fff;
}

.lang-arrow {
  transition: transform 0.3s ease-in;
  color: #d1d1d1;
}

.lang-dropdown-btn.active .d-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-list {
  display: none;
  position: absolute;
  background-color: #00000050;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  margin-top: 5px;
}

.lang-dropdown-list.active {
  display: block;
  opacity: 1;
}

.lang-dropdown-item {
  padding: 10px;
  color: #fff;
  text-decoration: none;
  display: block;
  transition: background 0.3s;
}

.lang-dropdown-item:hover {
  background: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="lang-dropdown">
  <button class="lang-dropdown-btn">
    <span class="lang-name">РУС</span>
    <i class="fas fa-chevron-down d-arrow lang-arrow"></i>
  </button>
  <div class="lang-dropdown-list">
    <a href="#" class="lang-dropdown-item">РУССКИЙ</a>
    <a href="#" class="lang-dropdown-item">ENGLISH</a>
    <a href="#" class="lang-dropdown-item">ҚАЗАҚША</a>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.