DIV rotieren lassen mit JS (kein Canvas)

Yogilein · 19. Mai 2014

Hallo,

folgendes Problem:

Ich möchte ein DIV um 360° rotieren lassen.

Das mache ich in einer Schleife so:

Code:

document.getElementById("Stern").style.transform="rotate("+grad+"deg)";

Funktioniert aber leider nicht in Chrome und Safarie, denn hier lautet die CSS-Eigenschaft nicht transform, sondern -webkit-transform.

Wie bekomme ich das nun ins Style-Element von JS?

So geht es schon einmal nicht:

Code:

document.getElementById("Stern").style.-webkit-transform="rotate("+grad+"deg)";

Aktuell erstelle ich mir gerade eine CSS-Datei, die 720 Klassen hat (ich drehe in 0,5°-Schritten). In JS muss ich dann in einer Schleife die Klassen zuweisen. Das scheint zu gehen, ich finde es persönlich aber etwas umständlich.

Das sieht dann so aus (nur eine Klasse, aber alle Eventualitäten):

Code:

.drehen1{-moz-transform:rotate(.5deg);-ms-transform:rotate(.5deg);-o-transform:rotate(.5deg);-webkit-transform:rotate(.5deg);transform:rotate(.5deg);}

Hat jemand einen besseren Lösungsvorschlag?

LG Yogilein

tsseh · 19. Mai 2014

Yogilein schrieb:
Wie bekomme ich das nun ins Style-Element von JS?

WebkitTransform

Yogilein schrieb:
Hat jemand einen besseren Lösungsvorschlag?

warum nicht nur 2 klassen mit start/end zustand?

kkapsner · 19. Mai 2014

Wenn in CSS-Eigenschaften Bindestriche vorkommen musst du sie weglassen und den nächsten Buchstaben groß schreiben. So kannst du dann mit JS darauf zugreifen.

Code:

document.getElementById("Stern").style.WebkitTransform="rotate("+grad+"deg)";

Aber normalerweise verwendet man ein Framework, damit dieses solche Browserunterschiede behandelt.

Yogilein · 19. Mai 2014

document.getElementById("Stern").style.WebkitTransform="rotate("+grad+"deg)";

Super, genau das habe ich gesucht. Ich habe mich gestern dabei fast zu Tode gegoogelt. Auf jeden Fall vielen Dank für die Antwort. Jetzt funktioniert alles.

LG Yogilein

kkapsner · 20. Mai 2014

Bitte - gern geschehen.

tsseh · 20. Mai 2014

also eigentlich bin ich der letzte der das fragen sollte, aber warum bleibst du nicht bei der css lösung und setzt in js nur die neue klasse?

kkapsner · 20. Mai 2014

Er hat doch oben geschrieben, dass er sonst 720 CSS-Klassen hätte, die jeweils nur eine Eigenschaft beschreiben. Das scheint mir etwas viel Overhead zu sein.

mikdoe · 20. Mai 2014

Meine erste Idee war Klassen dynamisch zu erzeugen. Geht das überhaupt mit JS?

Yogilein · 20. Mai 2014

mikdoe schrieb:
Meine erste Idee war Klassen dynamisch zu erzeugen. Geht das überhaupt mit JS?

Weil ich dann 720 Klassen einbinden müsste. Ich wüsste nicht, wie das mit nur 2 Klassen gehen sollte.

Code:

.drehen1{-moz-transform:rotate(.5deg);-ms-transform:rotate(.5deg);-o-transform:rotate(.5deg);-webkit-transform:rotate(.5deg);transform:rotate(.5deg);}
.drehen2{-moz-transform:rotate(1deg);-ms-transform:rotate(1deg);-o-transform:rotate(1deg);-webkit-transform:rotate(1deg);transform:rotate(1deg);}
.
.
.
.drehen720{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg);}

tsseh · 20. Mai 2014

kkapsner schrieb:
Er hat doch oben geschrieben, dass er sonst 720 CSS-Klassen hätte, die jeweils nur eine Eigenschaft beschreiben. Das scheint mir etwas viel Overhead zu sein.

um ein div um 360° zu drehen, benötigt man aber keine 720 klassen

- - - Aktualisiert - - -

Yogilein schrieb:
Ich wüsste nicht, wie das mit nur 2 Klassen gehen sollte.

Code:

<html>
  <head>
	  <title></title>
    <style>
      .first {
        position: absolute;
        top: 100px;
        width: 100px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 1s;
        transition: 1s;
      }
      .second {
        position: absolute;
        top: 100px;
        width: 100px;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transition: 1s;
        transition: 1s;
      }
    </style>
	  <script type="text/javascript" src="jquery.js"></script>
	  <script type="text/javascript">
	    $(document).ready(function(){
	      $("button").on("click", function()
	      {
	        $("div").toggleClass("first second");
	      });
      });  
	  </script>
  </head>
  <body>
    <div class="first">
       test
    </div>  
    <div class="second">
       test
    </div>  
    <button type="button"> 
      rotate
    </button> 
  </body>
</html>

mikdoe · 20. Mai 2014

Netter Effekt, hesst. Ich hab dem Code mal ein DOCTYPE spendiert und einen URL für jQuery hinzugefügt:

HTML:

<!DOCTYPE html>
<html>
  <head>
	  <title></title>
    <style>
      .first {
        position: absolute;
        top: 100px;
        width: 100px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 1s;
        transition: 1s;
      }
      .second {
        position: absolute;
        top: 100px;
        width: 100px;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transition: 1s;
        transition: 1s;
      }
    </style>
	  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	  <script>
	    $(document).ready(function(){
	      $("button").on("click", function()
	      {
	        $("div").toggleClass("first second");
	      });
      });  
	  </script>
  </head>
  <body>
    <div class="first">
       test
    </div>  
    <div class="second">
       test
    </div>  
    <button type="button"> 
      rotate
    </button> 
  </body>
</html>

Yogilein · 20. Mai 2014

Was mache ich jetzt wieder falsch, denn bei mir bewirkt der Code rein gar nichts.

LG Yogilein

kkapsner · 20. Mai 2014

Welchen Browser verwendest du denn? Eigentlich unterstützen Chome und Safari die CSS-Transitions.

@hesst: hatte irgendwie deine erste Antwort und dass es um eine Animation geht irgendwie überlesen... ist mit CSS natürlich um einiges einfacher.

tsseh · 21. Mai 2014

kkapsner schrieb:
ist mit CSS natürlich um einiges einfacher.

so, da sich jetzt ein verteidiger der css lösung gefunden hat, kann ich ja wieder auf die js schiene springen.
also, warum ist die css lösung besser? wenn man das rein über css pseudo klassen lösen würde, würde ich das einsehen.
auch wenn die js lösung aus meiner sicht einfacher wäre. das liegt aber daran, dass css mir nicht liegt und ich js (eine programmierte lösung) logischer finde und css nicht. will man das noch endlos drehen lassen, wirds noch kryptischer.
aber ich benötige, wenn ich keine css pseudo klassen nutzen kann trotzdem js um das ganze anzustossen. warum ist die css lösung dann besser als eine reine js lösung?
ist eine animation layout? aus meiner sicht nicht. ist das der springende punkt? ist eine animation doch layout und sollte man deswegen soviel wie möglich layout in die schicht stecken, die dafür entworfen wurde?

j-l-n · 21. Mai 2014

Also solange du nicht einen alten IE benutzt, müsste es eigentlich problemlos funktionieren: Can I use CSS3 Transitions

Yogilein · 21. Mai 2014

Ich hab's jetzt in mehreren aktuellen Browsern probiert. Bei mir tut sich nichts, auch wenn ich 100 Mal auf den Button klicke.

mikdoe · 21. Mai 2014

Welche Version hast du benutzt Yogilein? Die von hesst oder meine vervollständigte? Und was steht in der Fehlerkonsole?

Yogilein · 21. Mai 2014

Ich habe jeweils die erste Version genommen.

Schitt, warum bin ich nicht gleich auf die Fehlerkonsole gekommen?

Diese Meldung kommt:

SCRIPT5009: "$" ist undefiniert

Das $-Zeichen kam mir gleich etwas spanisch vor, den das kenne ich so in JS nicht, aber man lernt ja nie aus.

LG Yogilein

mikdoe · 21. Mai 2014

Genau deshalb sollst du meine Version nutzen, ich hab die ja nicht umsonst online gestellt, oder?

Deine Fehlermeldung heißt in diesem Fall, es ist kein jQuery geladen. Bei meiner Version wird es geladen.

kkapsner · 21. Mai 2014

Das funktioniert auch nur mit reinem CSS:

Code:

<!DOCTYPE html>
<html>
  <head>
	  <title></title>
    <style>
      #switch {
        position: fixed;
        bottom: 100%;
      }
      .first, #switch:checked + * + .second {
        position: absolute;
        top: 100px;
        width: 100px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 1s;
        transition: 1s;
      }
      .second, #switch:checked + .first {
        position: absolute;
        top: 100px;
        width: 100px;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transition: 1s;
        transition: 1s;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="switch">
    <div class="first">
       test
    </div>  
    <div class="second">
       test
    </div> 
    <label for="switch"> 
    <button type="button"> 
      rotate
    </button> 
    </label>
  </body>
</html>

Ich finde schon, dass eine Animation Layout ist. 90% der Animationen sind für die Funktionalität unnötig und nur für's Auge. Klingt für mich stark nach Layout...

Auch wenn du die Klassenänderung mit JS machst finde ich die Mischlösung einfacher, da du für eine CSS-Klassenänderung kein Framework brauchst - das kann man auch einfach mit vanilla JS machen. Animationen mit JS und ohne Framework sind dagegen ziemlich nervig.

Aber ich verwende für Animationen auch immer JS, da ich bei CSS einfach zu wenig Kontrolle hab'...

DIV rotieren lassen mit JS (kein Canvas)

Member

Lounge-Member

Super Moderator

Member

Super Moderator

Lounge-Member

Super Moderator

Moderator

Member

Lounge-Member

Moderator

Member

Super Moderator

Lounge-Member

j-l-n

Guest

Member

Moderator

Member

Moderator

Super Moderator