Javascript переходы наложение и непрозрачность - PullRequest
Новая
       10

Javascript переходы наложение и непрозрачность

0 голосов
/ 03 марта 2020

Я использую это наложение для функции поиска, и наложение появляется слева, как я могу судить по javascript:

HTML:

image

CSS: 

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0%;
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

JS: 

 /*/ SEARCH OVERLAY /*/ 

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

Я хочу вместо этого создать постепенное увеличение. Я попытался изменить его на style.opacity = "1" и "0". Но это не работает. Как бы мне go создать фейд (переход 0,5 с или около того) вместо слайда слева, как сейчас?

Ответы [ 3 ]

1 голос
/ 08 марта 2020

в вашем css измените width свойство на 100% и добавьте display свойство со значением none и удалите transition свойство.

тогда, если вы хотите использовать javascript попробуйте этот код: 

function fadeIn(fadeTarget) {
    var op = 0.01;
        fadeTarget.style.opacity = op;
    fadeTarget.style.display = 'block';
    var fadeEffect = setInterval(function () {
        fadeTarget.style.opacity = op;
        if (op < 1) {
            op += 0.01;
            fadeTarget.style.opacity = op;
        } else {
            clearInterval(fadeEffect);
        }
    }, 10);
}
function fadeOut(fadeTarget) {
      var op = 1;
    fadeTarget.style.opacity = op;
    var fadeEffect = setInterval(function () {
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.01;
        } else {
            clearInterval(fadeEffect);
            fadeTarget.style.display = 'none';
        }
    }, 10);
}
function openNav() {
  fadeIn(document.getElementById("myNav"));
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  fadeOut(document.getElementById("myNav"));
}

и, если вы хотите использовать jquery, удалите атрибут onload и добавьте closeButton и searchButton id к тегам. 

$(document).ready(function(){
  $("#closeButton").click(function(){
      $("#myNav").fadeOut();
  });

  $("#searchButton").click(function(){
      $("#myNav").fadeIn();
  });
  
});
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 100%;
  display:none;
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
}
image

Надеюсь, мой ответ поможет вам.

1 голос
/ 03 марта 2020

Попробуйте через этот метод css.

В css

myNav {
    opacity: 0;
    transition: all 0.5s;
}
myNav.active {
    opacity: 1;
}

И это в JavaScript

function openNav() {
  document.getElementById("myNav").classList.add("active");
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").classList.remove("active");
}
0 голосов
/ 03 марта 2020

Попробуйте это

css

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 100%;
    display: none;
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: all 0.5s; /* 0.5 second transition effect to slide in or slide down the 
    overlay (height or width, depending on reveal) */

}

JS

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}
...