Warum gibt es während der Animation zwischen zwei 'div' einen leeren Platz?

Kann mir jemand helfen, den weißen Zwischenraum während der Animation zu entfernen?Warum gibt es während der Animation zwischen zwei 'div' einen leeren Platz?

Muss ich noch ein div wrap beide div in eins hinzufügen?

Ich habe gewählt, Position-Top zu verwenden, um meine div-Animationen anzupassen, ist das das Problem verursacht und bitte schlagen Sie mir eine bessere Methode, um diese Animation zu tun, wenn überhaupt?

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     #top { 
 
      background: white; 
 
      color: white; 
 
      width: 300px; 
 
      height: 300px; 
 
      display: inline-block; 
 
      overflow: hidden; 
 
     } 
 

 
     #first { 
 
      background: blue; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 

 
     #second { 
 
      background: green; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 
    </style> 
 
    <script> 
 
     var up = true; 
 
     var down = false; 
 
     function animations() { 
 
      if (up) { 
 
       document.getElementById('first').style.top = '-300px'; 
 
       document.getElementById('second').style.top = '-300px'; 
 
       up = false; 
 
       down = true; 
 
      } 
 
      else if (down) { 
 
       document.getElementById('first').style.top = '0px'; 
 
       document.getElementById('second').style.top = '300px'; 
 
       down = false; 
 
       up = true; 
 
      } 
 
     } 
 

 
     //timer events 
 
     var startAnimations = setInterval(animations, 1000); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="top"> 
 
     <div id="first">first</div> 
 
     <div id="second">second</div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-07-28 Mohan Ravi

Während Ihr zweites div Element oben 0px statt 300px nach unten bewegen machen;

Ich hoffe, es hilft.

Quelle

2017-07-28 05:06:02

Mein jsFiddle Link: https://jsfiddle.net/duog6smr/ –

Vielen Dank für Ihre Hilfe ! –

Anytime @MohanRavi –

Geben Sie keinen Stil top 300px, während zweite Div sinkt, setzen Sie es einfach 0px wie erste Div. Beide Divs sind relativ und der erste Push der zweite, so wird es nicht 300px wird es 300px + first div sein.

document.getElementById('second').style.top = '0px';

Hoffnung hilft,

Quelle

2017-07-28 05:06:56 Berkay

Vielen Dank für Ihre Hilfe! Ich schätze dich! –

Bitte markieren Sie Ashishs Lösung als Antwort. Er antwortete zuerst. @MohanRavi – Berkay

Das ist so bescheiden von dir! –

Seine wegen Ihrer relativen Positionierung. Verwenden Sie den angegebenen CSS:

#top { 
      background: white; 
      color: white; 
      width: 300px; 
      height: 300px; 
      display: inline-block; 
      overflow: hidden; 
      position:absolute; 
     } 

     #first { 
      background: blue; 
      transition: 0.5s; 
      height: 300px; 
      width:300px; 
      position:absolute; 
     } 

     #second { 
      margin:0px; 
      background: green; 
      transition: 0.5s; 
      height: 300px; 
      width:300px; 
      position: absolute; 
     }

Quelle

2017-07-28 05:09:27

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     #top { 
 
      background: white; 
 
      color: white; 
 
      width: 300px; 
 
      height: 300px; 
 
      display: inline-block; 
 
      overflow: hidden; 
 
     } 
 

 
     #first { 
 
      background: blue; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 

 
     #second { 
 
      background: green; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 
    </style> 
 
    <script> 
 
     var up = true; 
 
     var down = false; 
 
     function animations() { 
 
      if (up) { 
 
             
 
       up = false; 
 
       down = true; 
 
      document.getElementById('first').style.top = '-300px'; 
 
       document.getElementById('second').style.top = '-300px'; 
 

 
      } 
 
      else if (down) { 
 
       down = false; 
 
       up = true; 
 
       document.getElementById('second').style.top = '0px'; 
 
       document.getElementById('first').style.top = '0px'; 
 
       
 
      } 
 
     } 
 

 
     //timer events 
 
     var startAnimations = setInterval(animations, 1000); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="top"> 
 
     <div id="first">first</div> 
 
     <div id="second">second</div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-07-28 05:45:56 Dhaarani

@Mohan Ravi überprüfen Sie es. wenn irgendwelche Zweifel mich wissen lassen. – Dhaarani

Vielen Dank für Ihre Hilfe! –

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     #top { 
 
      background: white; 
 
      color: white; 
 
      width: 300px; 
 
      height: 300px; 
 
      display: inline-block; 
 
      overflow: hidden; 
 
     } 
 

 
     #first { 
 
      background: blue; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 

 
     #second { 
 
      background: green; 
 
      transition: 0.5s; 
 
      height: 300px; 
 
      position: relative; 
 
     } 
 
    </style> 
 
    <script> 
 
     var up = true; 
 
     var down = false; 
 
     function animations() { 
 
      if (up) { 
 
       document.getElementById('first').style.top = '-300px'; 
 
       document.getElementById('second').style.top = '-300px'; 
 
       up = false; 
 
       down = true; 
 
      } 
 
      else if (down) { 
 
       document.getElementById('first').style.top = '0px'; 
 
       document.getElementById('second').style.top = '0'; 
 
       down = false; 
 
       up = true; 
 
      } 
 
     } 
 

 
     //timer events 
 
     var startAnimations = setInterval(animations, 1000); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="top"> 
 
     <div id="first">first</div> 
 
     <div id="second">second</div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-07-28 06:28:11

Warum gibt es während der Animation zwischen zwei 'div' einen leeren Platz?

Antwort

Verwandte Themen