JavaFXボタンのホバーのスケーリング

Question

私はJavaFXの効果について学び始めましたが、ホバーのボタンのスケーリングに関する関連情報は見つけられません。

私は、Scaleトランジションを使用したJavaFXコードまたはCSSを使用してコードを実行できると推測しています。 CSSでは、マウスのホバーでボタンを大きくする方法を見つけましたが、それをJavaFXに実装する方法はわかりません。

.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); 
} 

どのように私はFX-CSSコードにそのCSSコードを変換することができます：ここで

は、HTMLのための純粋なCSSコードでホバー効果を育てているのですか？ cssコードはfx-cssコードと同じですか？ （意味は "-fx- [buttonID]"を先頭に付けておけばいいのですか？）

CSSアニメーションやJavaFX CSSのような情報を守る情報があれば、私は知りたいと思います。

この作業で私を助けてください。

Answer 1

Nodeはのデフォルト値を持っている-fx-scale-x、-fx-scale-yと-fx-scale-z CSSプロパティを持っています。 NodeはButtonのスーパークラスであるため、これらのプロパティは継承されます。あなたのスタイルシートに、このCSSのselectprを追加し、アプリケーション内のホバー上の任意のボタンにそれを適用するに

：

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

異なるコントロールがリンクされたガイドをチェックすることができ、あなたがすることもできなければならないものをCSSスタイルを表示するにはdefault stylesheet for JavaFX 8 (modena.css)を確認してください。

CSSでアプリケーションのスタイルを設定する方法については、tutorialを参照してください。