БЛОГ НА HUSL


Помогите доработать код JS Анимации

Автор вопроса: Artem Criticall Metr

В общем есть код Modal-окна, которое плавно выезжает снизу, при нажатии определенной кнопки. А прячется оно при нажатии на площадь вне окна. Проблема заключается в том что выезжает то оно плавно, а вот прячется резко.. Помогите мне доработать эту часть кода, чтобы работало все плавно, и красиво)

// Переменные для окон
var modal = document.getElementById('myModal');

// Переменные для кнопок
var btn = document.getElementById("myBtn");
// Когда нажимаешь кнопку-открытие окна 
btn.onclick = function() {
  modal.style.display = "block";
}
// Закрыть окно при нажатии в любом месте
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.3s;
    animation-name: fadeIn;
    animation-duration: 0.3s
  }
  .modal-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fefefe;
    border-radius: 15px 15px 0px 0px;
    width: auto;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.3s;
    animation-name: slideIn;
    animation-duration: 0.3s
  }
  .modal-header {
    padding: 2px 15px;
    background: transparent;
    color: black;
  }
  .line {
    display: flex;
    width: auto;
    margin: 10;
    border: 1px solid gainsboro;
  }
  .modal-body {
    padding: 2px 10px;
  }
  .modal-params {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    width: auto;
    height: auto;
  }
  .params {
    vertical-align: middle;
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: lighter;
    align-items: center;
    margin: 10;
    width: auto;
    height: 20px;
    cursor: pointer;
  }
  .params>img {
    vertical-align: middle;
    margin-right: 10;
    width: 20;
    height: 20;
  }
  @-webkit-keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bb3">
  <button class="profile-button2" id="myBtn">
            <div>
                <img src="img/ico/more.png">
            </div>
    </button>
</div>


<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3>Профиль</h3>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
        <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
        <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
        <div class="line"></div>

        <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
        <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
      </div>
    </div>
  </div>
</div>


Источник

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

Автор решения: Artem Criticall Metr

Решил переписать полностью весь код) Сделал немного иначе) но теперь работает практически идеально

function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
// Закрыть окно при нажатии в любом месте
window.onclick = function(event) {
  if (event.target == myNav) {
    myNav.style.height = "0%";
  }

}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0, 0.9);
  overflow: auto;
  transition: 0.5s;
}

.overlay-content {
  position: absolute;
  margin-top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  border-radius: 15px 15px 0px 0px;
  width: auto;
}

.modal-header {
  padding: 2px 15px;
  background: transparent;
  color: black;
}

.line {
  display: flex;
  width: auto;
  margin: 10;
  border: 1px solid gainsboro;
}

.modal-body {
  padding: 2px 10px;
}

.modal-params {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  width: auto;
  height: auto;
}

.params {
  vertical-align: middle;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: lighter;
  align-items: center;
  margin: 10;
  width: auto;
  height: 20px;
  cursor: pointer;
}

.params>img {
  vertical-align: middle;
  margin-right: 10;
  width: 20;
  height: 20;
}

.closebtn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.closebtn>div>img {
  width: 16;
  height: 16;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="profile-button2" onclick="openNav()">
                <div>
                    <img src="img/ico/more.png">
                </div>
            </button>

<div id="myNav" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Профиль</h3>
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
        <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
        <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
        <div class="line"></div>

        <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
        <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
      </div>
    </div>
  </div>
</div>

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

Убрал media querie что-бы код мог работать в маленьком окошке предпросмотра сайта. Как-то так можно сделать:

// Переменные для окон
var modal = document.getElementById('myModal');
const modalContent = document.getElementById('modal-content');

// Переменные для кнопок
var btn = document.getElementById("myBtn");

// Когда нажимаешь кнопку-открытие окна 
btn.onclick = function() {
  modal.removeEventListener('animationend', dspNone);
  modal.style.display = "block";
  modal.classList.remove('modal-fade-out');
  modalContent.classList.remove('modal-content-slideOut');
  modal.classList.add('modal-fade-in');
  modalContent.classList.add('modal-content-slideIn');
}

// Закрыть окно при нажатии в любом месте
modal.onclick = function(event) {
  if (event.target == modal) {
    modal.classList.remove('modal-fade-in');
    modalContent.classList.remove('modal-content-slideIn');
    modalContent.classList.add('modal-content-slideOut');
    modal.classList.add('modal-fade-out');
    modal.addEventListener('animationend', dspNone);
  }
}

function dspNone() {
  modal.style.display = "none";
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.85);
}

.modal-fade-in {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
  animation-name: fadeIn;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
}

.modal-fade-out {
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
  animation-name: fadeOut;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.modal-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  border-radius: 15px 15px 0px 0px;
  width: auto;
}

.modal-content-slideIn {
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.3s;
  animation-name: slideIn;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
}

.modal-content-slideOut {
  -webkit-animation-name: slideOut;
  -webkit-animation-duration: 0.3s;
  animation-name: slideOut;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
}

.modal-header {
  padding: 2px 15px;
  background: transparent;
  color: black;
}

.line {
  display: flex;
  width: auto;
  margin: 10;
  border: 1px solid gainsboro;
}

.modal-body {
  padding: 2px 10px;
}

.modal-params {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  width: auto;
  height: auto;
}

.params {
  vertical-align: middle;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: lighter;
  align-items: center;
  margin: 10;
  width: auto;
  height: 20px;
  cursor: pointer;
}

.params>img {
  vertical-align: middle;
  margin-right: 10;
  width: 20;
  height: 20;
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  0% {
    bottom: -300px;
    opacity: 0
  }
  100% {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideOut {
  0% {
    bottom: 0;
    opacity: 1;
  }
  100% {
    bottom: -300px;
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {}
  100% {
    opacity: 0;
  }
}
<div class="bb3">
  <button class="profile-button2" id="myBtn">
            <div>
                <img src="img/ico/more.png">
            </div>
    </button>
</div>


<div id="myModal" class="modal">
  <div id="modal-content" class="modal-content">
    <div class="modal-header">
      <h3>Профиль</h3>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
        <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
        <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
        <div class="line"></div>

        <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
        <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
      </div>
    </div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.