JavaFX Button Hover-Skalierung

Question

Ich habe angefangen, über JavaFX-Effekte zu lernen, aber ich finde keine relevanten Informationen über Button Scalling beim Hover.

Ich vermute, es könnte entweder mit JavaFX-Code mit der Skalierung oder mit CSS getan werden. In CSS habe ich einen Weg gefunden, Button's bei Mouse-Hovern zu vergrößern, aber ich weiß nicht, wie man es in JavaFX implementiert.

Hier ist der wächst Hover-Effekt in reinem CSS-Code für html:

.hvr-grow { 
    display: inline-block; 
    vertical-align: middle; 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    transition-duration: 0.3s; 
    transition-property: transform; 
} 

.hvr-grow:hover, 
.hvr-grow:focus, 
.hvr-grow:active { 
    transform: scale(1.1); 
} 

Wie kann ich den CSS-Code in fx-CSS-Code umwandeln? Ist der css-Code derselbe wie der fx-css-Code? (Bedeutung muss ich einfach "-fx- [Knopf-ID]" vor und das ist es?)

Wenn es irgendwelche Informationen gibt, die CSS-Animationen und solche Sachen für JavaFX css betreffen, würde ich gerne wissen.

Könnten Sie mir bitte bei dieser Aufgabe helfen?

Answer 1

Node hat eine -fx-scale-x, -fx-scale-y und eine -fx-scale-z CSS-Eigenschaft, die den Standardwert von hat. Node ist die Oberklasse von Button daher werden diese Eigenschaften vererbt.

Um es auf eine beliebige Taste auf schweben in Ihrer Anwendung gelten, diese CSS selectpr zu Ihrem Stylesheet hinzufügen:

.button:hover { 
    -fx-scale-x: 1.1; 
    -fx-scale-y: 1.1; 
    -fx-scale-z: 1.1; 
} 

zu sehen, welche CSS-Stile die verschiedenen Steuerelemente haben Sie die verknüpfte Führung überprüfen und Sie können auch Überprüfen Sie die default stylesheet for JavaFX 8 (modena.css).

Um zu erfahren, wie Sie Ihre Anwendung mit CSS stylen, können Sie dies überprüfen tutorial.