Ripple-Effekt - Grenzradius Ausgabe

Question

ich die folgende Animation gemacht habe:

Fiddle

Wenn Sie ein großer Retina-Display (auf kleinem mac Retina es auch abgehört) haben - sehen, dass es ziemlich gut aussieht , aber wenn Sie es zu einem Nicht-Retina-Display bringen, sieht es irgendwie verschwommen und rechteckig-d aus, statt rund eckig.

Wenn Sie nicht Retina-Display (oder Mac Laptop) haben - Sie können Devtools verwenden und verlangsamen Sie die Animationen auf 10% und sehen, dass es sich richtig verhält, wenn verlangsamt, aber bei normaler Geschwindigkeit sieht es anders aus.

Update Problem scheint hauptsächlich in Chrome zu sein, funktioniert FF gut.

Brevity CSS:

.container { 
    width: 700px; 
    height: 128px; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    cursor: pointer; 

    .ripple-container { 
    width: 100%; 
    height: 100%; 
    background-color: #F5B30C; 
    position: relative; 
    overflow: hidden; 
    } 

    .ripple { 
    position: absolute; 
    background-color: blue; 
    top: 0; 
    right: 0; 
    height: 3px; 
    width: 3px; 
    border-radius: 50%; 
    transition: transform 1s; 

    &.rippler-active { 
     transition: transform 0.5s; 
     transform: scale(500); 
    } 
    } 
} 

Answer 1

Statt Skalierung von 1 bis 500 (die alle Arten von U-Bahn bösen Bugs schafft) ...
Skala von 0 bis (etwa) 3, sondern als anstelle der Einstellung die ursprüngliche Größe auf 0 (oder 3px) müssen Sie auf eine riesige Größe wie 1400px einstellen.

Eine kleine Welle von 1400px * 3 scale = bedeutet, kann es bis zu 4200px Skala, die ich denke, als genug für jeden Zweck mehr ist:

var el = document.querySelector('.container'); 
 
var ripple = document.querySelector('.ripple'); 
 

 
el.addEventListener('click', function() { 
 
    ripple.classList.toggle("ripple-active") 
 
});

.container { 
 
    height: 128px; 
 
    border-top-left-radius: 4px; 
 
    border-top-right-radius: 4px; 
 
    cursor: pointer; 
 
} 
 

 
.ripple-container { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #F5B30C; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.ripple { 
 
    position: absolute; 
 
    background-color: #3f3fd8; 
 
    top: 0; 
 
    right: 0; 
 
    height: 1400px; 
 
    width: 1400px; 
 
    /* Notice the size!! */ 
 
    margin: -700px -700px auto auto; 
 
    /* and set here the desired offset */ 
 
    border-radius: 50%; 
 
    transition: transform 2s; 
 
    transform: scale(0); 
 
} 
 

 
.ripple.ripple-active { 
 
    transition: transform 2s; 
 
    transform: scale(3);   /* 1400 * 3 !!! yey */ 
 
}

<div class="container"> 
 
    <div class="ripple-container"> 
 
    <div class="ripple"></div> 
 
    </div> 
 
</div>