2016-04-18 5 views
1

Ich habe eine CSS-Animation, die eine Drehung mit Keyframes mit transformieren verwendet drehen.CSS spinning Kreisanimation onClick wird abgehackt, wenn mehrmals ausgeführt

Es funktioniert gut beim ersten Mal - aber wenn Sie die Animation mehrmals mit einem Onclick, der die Spin-Klasse hinzufügt, wird es mit der Zeit abgehackt und abgehackt. Hier ist ein Code mit einem Link, um es in jsfiddle:

<div class="row numRandoms"> 
     <h3>Winning Numbers:</h3> 
     <div class="ball pickedIndex0" ></div> 
     <div class="ball pickedIndex1" ></div> 
     <div class="ball pickedIndex2" ></div> 
     <div class="ball pickedIndex3" ></div> 
    </div> 

    .ball { 
    float: left; 
    display: block; 
    width: 150px; 
    height: 150px; 
    margin: 20px; 
    font-size: 4em; 
    color: black; 
    padding-top: 3.5%; 
    text-align: center; 
    vertical-align: middle; 
    background-color: white; 
    border-radius: 50%; 
    box-shadow: inset -25px -25px 40px rgba(0,0,0,.5); 
    background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%,  transparent 100%); 
    background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%); 
    background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%); 
    background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%); 
} 
.spin { 
     -webkit-animation: spin 2s linear infinite; 
     -moz-animation: spin 2s linear infinite; 
     -o-animation: spin 2s linear infinite; 
     animation: spin 2s linear infinite; 
} 
@-webkit-keyframes spin { 
    from { 
     -webkit-transform:rotate(0deg); 
    } 
    to { 
     -webkit-transform: rotate(360deg); 
    }} 
@-moz-keyframes spin { 
    from { 
     -moz-transform:rotate(0deg); 
    } 
    to { 
     -moz-transform:rotate(360deg); 
    }} 
@-o-keyframes spin { 
    from { 
     -o-transform:rotate(0deg); 
    } 
    to { 
     -o-transform:rotate(360deg); 
    }} 
@keyframes spin { 
    from { 
     transform:rotate(0deg); 
    } 
    to { 
     transform:rotate(360deg); 
    }} 

Sie können hier den einfachen Code finden: http://lottery-game.marycamacho.com

Ich kann‘: https://jsfiddle.net/vrhc4vet/

Sie können es hier live sehen Arbeits t sagen Sie, wenn andere Aspekte von meinem Javascript die Verschlechterung verursachen oder wenn es etwas inhärentes in der Animation gibt, die es wiederholt, funktioniert es nicht gut.

Ich teste mit dem neuesten Chrom-Browser.

+0

Ihr Code sieht gut aus. Entschuldigung, ich kann "Hack" nicht in Firefox unter Windows 10 in Ihrer Datei reproduzieren. Ich habe versucht, die Spin-Klasse über 'classList.add (" spin ")' und 'className + =" spin "'; beide animierten reibungslos. – Jeremy

+0

@ Jeremy - die Funkstille war nicht sichtbar in der Datei, die mich darauf hinwies, dass es kein CSS-Problem war, sondern ein Problem mit meinem JavaScript-Code. Ich habe den Code umstrukturiert und ein Synchronisierungsproblem mit zwei separaten Timeouts gefunden. Als ich ihn neu strukturierte, so dass es nur noch 1 war, wurde es geglättet. –

Antwort

1

Der Beispielcode funktioniert perfekt - aber das Projekt nicht. Die bereitgestellte Version wurde jetzt mit meinem Update aktualisiert. Das Problem war tiefer in dem Projekt - wo ich versehentlich 2 Timeouts erstellt hatte, die nicht gut zusammen arbeiteten. Ich habe den Code so überarbeitet, dass nur 1 Timeout verwendet wurde, und das Problem wurde behoben.

1

Es scheint, dass Ihr Code einwandfrei funktioniert. Das Problem, das Sie haben, könnte das Ergebnis einer langsamen Internetverbindung sein. Wenn dies der Fall ist, sollten Sie dennoch versuchen, Ihre Website zu optimieren, da viele Leute diese abgehackte Animation in ländlichen Gebieten oder an Orten mit langsamen drahtlosen Internetverbindungen erleben werden. Hier sind einige Dinge, die Ihre Website verlangsamen könnten.

Bootstrap, Bootstrap.js und jQuery werden alle lokal geladen, obwohl beide CDNs haben. Sie sollten

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

zu

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/css" rel="stylesheet"> 

und

<script src="js/jquery-2.2.2.min.js"> 
<script src="js/bootstrap.min.js"> 

zu

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

Die Integrität/crossorigin Sachen aus Sicherheitsgründen wichtig ist, ändern. Eine andere Sache ist, dass Ihre page.js und styles.css Dateien beide groß sind, und Sie sollten wahrscheinlich minify them.

Es gibt viele Dinge, die Sie tun können, um Ihre Websites zu optimieren. Hier sind einige Websites, die Ihnen helfen könnten:

Google Developers Page Speed Test
GTmetrix Website Speed and Performance Optimization