Animacja? Jak to zrobić?

pytanie zadane 2 października 2019 w HTML i CSS przez Majonez.exe Gaduła (3,490 p.)

Witam wszystkich, jak zrobić żeby po zniknięciu tkz. "tosta" inne wyświetlone przesuwały się do góry z animacją (teraz po prostu bez animacji są). Macie jakieś pomysły? Adres strony https://aurolia-css.github.io/toast.

PS. Poklikajcie kilka razy na "Open Toast".

komentarz 2 października 2019 przez Chess Szeryf (76,710 p.)

Wyjaśnij na czym ma polegać animacja.

komentarz 3 października 2019 przez Majonez.exe Gaduła (3,490 p.)

Po zniknięciu pierwszego "tosta" kolejne powinny płynnie przesunąć się do góry ekranu, na miejsce poprzedniego. (teraz tego nie robią, znikają i pojawiają się wyżej)

1 odpowiedź

odpowiedź 3 października 2019 przez Chess Szeryf (76,710 p.)

.square {
  width: 200px; 
  height: 100px;
  background: orange;
  transition: 800ms;
  border: 1px solid green;
}

<body style="background: darkgoldenrod;">

<button>hello</button>


var rule1 = document.styleSheets[0].cssRules[0];

let fast_value;

/* ************************************************************************* */
/* allow units for transitionDuration for .square class this is "ms" and "s" */
/* ************************************************************************* */

if(rule1.selectorText == '.square') {

  if(rule1.style.transitionDuration.substring(rule1.style.transitionDuration.length-2, rule1.style.transitionDuration.length) == 'ms') {
    fast_value = (rule1.style.transitionDuration.substring(0, rule1.style.transitionDuration.length-2)|0); // probably only number of type integer (convert)
  }  else if(rule1.style.transitionDuration.substring(rule1.style.transitionDuration.length-1, rule1.style.transitionDuration.length) == 's') {
    fast_value = Number(rule1.style.transitionDuration.substring(0, rule1.style.transitionDuration.length-1))*1000;
  
   }


} else {
  fast_value = 500;
}


function cqq(Q) {
  var interval1 =  setInterval( function() {

    if(Q.length == 0){
      clearInterval(interval1);
    } else {
      Q[0]();
      Q.splice(0,1);
    }

  }, (fast_value)*2);
}


function a() {

 document.getElementsByClassName('square')[0].remove();

}

function transition_a() {
  let created_div2 = document.getElementsByClassName('square');
  created_div2[0].style.background = 'green';
  created_div2[0].style.height = 0;
  created_div2[0].style.transform = 'rotate(90deg)';
}

var Q=new Array();

function b() {

  Q.push(transition_a);
  Q.push(a);
 
  const new_div = document.createElement('div');

  new_div.className = 'square';
  new_div.textContent = 'hello';

  document.body.appendChild(new_div);  


  if(Q.length == 2) { // const ? = 2
    cqq(Q);
  }
}

document.querySelector('button').onclick = b;

</body>

link link

komentarz 4 października 2019 przez Majonez.exe Gaduła (3,490 p.)

No nie o takie coś chodziło

komentarz 4 października 2019 przez Chess Szeryf (76,710 p.)

Zamiast pisać

No nie o takie coś chodziło

napisz w takim razie, o co chodzi.

komentarz 4 października 2019 przez Majonez.exe Gaduła (3,490 p.)

Za to że mój framework jest wzorowany na MaterializeCSS to: https://materializecss.com/toasts.html tak jak tutaj, poklikaj w pokazywanie "tosta" i zobaczysz jak będą znikać. Gdy jeden zniknie to reszta przesunie się do góry o takie coś mi chodzi)

komentarz 4 października 2019 przez Chess Szeryf (76,710 p.)
edycja 5 października 2019 przez Chess

To co w takim razie w moim rozwiązaniu jest nieprawidłowe? Przecież też po kliknięciu na przycisk dodawane są prostokąty i znika pierwszy, reszta się przesuwa w górę.

.square {
  width: 200px; 
  height: 100px;
  background: orange;
  transition: 500ms;
  border: 1px solid green;
}

.square2 {
  height: 50px;
  width: 200px;
  background: transparent;
  transition: 167ms;
}

<body style="background: darkgoldenrod;">

<button>hello</button>



var rule1 = document.styleSheets[0].cssRules[0];

let fast_value;

/* ************************************************************************* */
/* allow units for transitionDuration for .square class this is "ms" and "s" */
/* ************************************************************************* */

if(rule1.selectorText == '.square') {

  if(rule1.style.transitionDuration.substring(rule1.style.transitionDuration.length-2, rule1.style.transitionDuration.length) == 'ms') {
    fast_value = (rule1.style.transitionDuration.substring(0, rule1.style.transitionDuration.length-2)|0); // probably only number of type integer (convert)
  }  else if(rule1.style.transitionDuration.substring(rule1.style.transitionDuration.length-1, rule1.style.transitionDuration.length) == 's') {
    fast_value = Number(rule1.style.transitionDuration.substring(0, rule1.style.transitionDuration.length-1))*1000;
  
   }


} else {
  fast_value = 500;
}


var Q=new Array();
var Q2=new Array();


function cqq(QQ, fast = 1) {
  var interval1 =  setInterval( function() {
  console.log(QQ);
    if(QQ.length == 0){
      clearInterval(interval1);
    } else {
      QQ[0]();
      QQ.splice(0,1);
    }

  }, (fast_value)*fast);
}



function a(arg1) {

 document.getElementsByClassName(arg1)[0].remove();



}

function transition_a() {
  let created_div2 = document.getElementsByClassName('square');
  created_div2[0].style.background = 'green';
  created_div2[0].style.height = 0;
  created_div2[0].style.transform = 'rotate(90deg)';
}



function create_el_a () {
  const new_div = document.createElement('div');
  new_div.className = 'square';
  new_div.textContent = 'hello';

  const new_div_2 = document.createElement('div');
  new_div_2.className = 'square2';
 // transition_el_a(new_div_2);

  document.body.appendChild(new_div_2);
  document.body.appendChild(new_div); 

  return new_div_2;

}


function transition_el_a (my_div_from_create_el_a) {
  console.log(2); 
  my_div_from_create_el_a.style.height = '0px';
 
  setTimeout(a, 100, my_div_from_create_el_a.className);
  
}

function b() {


 let div1 = create_el_a();

  Q2.push(transition_el_a.bind(undefined, div1));
 

  Q.push(transition_a);
  Q.push(a.bind(undefined,'square'));
 
 console.log(Q2.length);

 
  if(Q2.length == 1) {
  console.log(2);
    cqq(Q2, 0.1);
  }

 if(Q.length == 2) { // const ? = 2
    cqq(Q);
  }

 
}

document.querySelector('button').onclick = b;