Анимация: исчезать при создании элемента и исчезать при удалении - PullRequest
Новая
       25

Анимация: исчезать при создании элемента и исчезать при удалении

2 голосов
/ 15 апреля 2020

У меня проблемы со следующей ситуацией.

У меня есть кнопка, которая действует как обычный переключатель. Когда я нажимаю кнопку «Анимировать», я хочу, чтобы <p>This is new Div</p> исчезал, когда я снова нажимал на кнопку Animate, этот <p> должен исчезнуть.

Как этого добиться? 

const main = document.getElementById('main');
const btn = document.getElementById('btn');

let show = false;
btn.addEventListener('click', () => {
  if(show) {
    const newDiv = document.getElementById("new-div");
    newDiv.remove();
    show = false;
  } else {
    const newDiv = document.createElement('div');
    newDiv.id = "new-div";
    newDiv.innerHTML = "<p>This is new Div</p>";
    main.appendChild(newDiv);
    show = true;
  }
})
#new-div {
  transition: all 2s ease-in-out;
}
<div id="main">
  <button id="btn">Animate</button>
</div>

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

И самое большое препятствие на сегодняшний день - реализовать fade-out, поскольку элемент удаляется.

Ответы [ 4 ]

1 голос
/ 15 апреля 2020

На основании вашей информации, я сделал уточненную версию, пожалуйста, смотрите скрипту и код ниже: https://jsfiddle.net/Kenvdb/8nsbp16o/

JavaScript: 

const main = document.getElementById('main');
const btn = document.getElementById('btn');

let toggledDiv = null;

btn.addEventListener('click', () => {
  if (!toggledDiv) {
    show();
  } else {
    hide();
  }
})

const show = () => {
  toggledDiv = document.createElement('div');
  toggledDiv.id = "content";
  toggledDiv.style.opacity = "1";
  toggledDiv.innerHTML = "<p>This is new Div</p>";

  main.appendChild(toggledDiv);
}

const hide = () => {
  toggledDiv.style.animation = "fade-out 0.5s ease-in";
  toggledDiv.style.opacity = "0";
  toggledDiv.addEventListener('animationend', remove);
  toggledDiv.addEventListener('webkitAnimationEnd', remove);
}

const remove = () => {
  toggledDiv.remove();
  toggledDiv = null;
};

CSS: 

#content {
  opacity: 0;
  animation: fade-in 0.5s ease-in;
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

HTML: 

<div id="main">
  <button id="btn">Animate</button>
</div>
0 голосов
/ 15 апреля 2020

Есть несколько способов сделать это. Вы можете установить непрозрачность вновь добавленного элемента, используя атрибут style: 

const main = document.getElementById('main');
const btn = document.getElementById('btn');

let show = false;
let fading = false;
btn.addEventListener('click', () => {
  if (fading) return;
  if (show) {
    const newDiv = document.getElementById("new-div");
    newDiv.style = "opacity: 0"; // start the fade
    fading = true;
    window.setTimeout(function() {
      fading = false; // disable showing/hiding while fading
      newDiv.remove(); // remove after fade completed
      show = false;
    }, 2000);
  } else {
    show = true;
    const newDiv = document.createElement('div');
    newDiv.id = "new-div";
    newDiv.innerHTML = "<p>This is new Div</p>";
    main.appendChild(newDiv);
    window.setTimeout(function() {
      newDiv.style = "opacity: 1"; // Start fading after a minimal time
    });
  }
})
#new-div {
  transition: all 2s ease-in-out;
  opacity: 0;
}
<div id="main">
  <button id="btn">Animate</button>
</div>

Или вы можете использовать jQuery, что значительно уменьшит код: 

$("#btn").on('click', () => {
  var newDiv = $("#new-div");
  if (newDiv.length) {
    newDiv.stop().fadeOut(2000, function() {
      newDiv.remove();
    });
  } else {
    $(`<div id='new-div'>
       <p>This is new Div</p>
       </div`).appendTo("#main").hide().fadeIn(2000);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <button id="btn">Animate</button>
</div>
0 голосов
/ 15 апреля 2020

Вы можете сделать это, просто используя оба метода fadeIn() и fadeOut() в jQuery.

Вот пример: 

let alreadyClicked = false;

$("#btn").click(function() {
   if(alreadyClicked == false) {
      $("p").remove(); //Remove the paragraph if already created.
      $("#main").append("<p style='display: none;'>Hello, world!</p>"); //Create a paragraph.
      $("p").fadeIn(); //Show it by fading it in.
      alreadyClicked = true;
   } else {
      $("p").fadeOut();  //Fade it out
      alreadyClicked = false;
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <button id="btn">Animate</button>
</div>
0 голосов
/ 15 апреля 2020

Сначала вам нужно установить непрозрачность на 0. Затем вы можете применить анимацию ключевых кадров. В противном случае элемент не имеет ничего для перехода.

См. Ниже. 

#new-div {
  opacity: 1;
  animation: fadeIn 2s ease-in-out;

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}
...