Wenn Sie versuchen, die Standard-Icons eines jQuery Mobile zu verwenden, um eine schöne Rotationsanimation zu erhalten, wenn das reduzierbare Objekt ausgeblendet oder erweitert ist, aber ein seltsames Ergebnis erzielt wird, wird der gesamte reduzierbare Titel in der Überschrift gedreht.Wie animiert man das Symbol einer faltbaren Überschrift von jQuery Mobile?
In meiner idealen Lösung möchte ich einfach die vordefinierten jQM-Symbolklassen verwenden, ohne dass ich dafür extra einen zusätzlichen Stil hinzufügen muss.
Beispiel: icon-carat-u und icon-carat-d drehen sich um 180 Grad, so dass sie animieren, wenn das kollabierbare Bild expandiert bzw. kollabiert.
Darüber hinaus versuche ich, das Ereignis click zu vermeiden, weil das zusammenklappbare Symbol animiert werden sollte, auch wenn ich Code collapsible("expand") oder verwende.
Hier ist mein Code:
.ui-icon-carat-d {
transform: rotate(-180deg);
transition: .3s;
}
.ui-icon-carat-u {
transform: rotate(0deg);
transition: .3s;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
<h4>Heading</h4>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
</div>
</div>
</body>
</html>Wie kann ich die Standard Karat Symbole drehen, um eine schöne glatte Animation in einer jQuery Mobile zusammenklappbar Überschrift zu bekommen?
Ich verwende eigentlich diese CSS .'ui-icon-Karat-d :: after { verwandeln: drehen (-180deg); Übergang: .5s; } .ui-icon-carat-u :: nach { transform: rotieren (180deg); Übergang: .5s; } 'und es dreht sich gut, aber weil ich ein Newbe in CSS-Transformationen und Übergängen bin, kann ich noch nicht verstehen, warum es nicht möglich ist, nur eine halbe Kreisumdrehung zu machen. Ich glaube, ich muss dieses Thema vertiefen, um Ihren Satz vollständig zu verstehen. "Der Browser kann sicherlich keine clevere Animation zwischen zwei getrennten, nicht verwandten Icons machen". Mein Fehler. Irgendwelche Vorschläge dazu? – deblocker
@deblocker Ich habe meinen Code so angepasst, dass er je nach Kommentar eine Halbkreisrotation ausführt. Der Grund, warum dies nicht mit den standardmäßigen jQuery Mobile-Stilen möglich ist, ist, dass sich das Caret NICHT über CSS dreht - das Symbol wird durch ein anderes Bild ersetzt. In CSS gibt es leider keine Möglichkeit, zwischen zwei Hintergrundbildern zu wechseln. In meinem Beispiel zwinge ich das Bild also dazu, die ganze Zeit auf der ersten, regelmäßigen Einfügemarke zu bleiben. –