How to time the effect of a css look in javafx?

Tags: css,javafx

Problem :

Is it possible to give timing for the effects described in CSS?

So what I would like to have is, that if you push a button, then the change in its look lasts a bit longer, even a bit after the release.

So I would imagine some kind of command in the .button:pressed{} section, that makes this possible.

Or if its only possible in the java code, that's good too! Do you have an idea? Thanks!

So for example:

.button:hover:pressed {
-fx-background-color: #A6C3F1;
-fx-background-radius: 30;
-fx-text-fill: black;
//pseudo: -fx-pressed-lasts: 300 (milisec);

So if you klick on the button, while you are holding the click, the button is gonna have this color. I would like to have this color 300 milisec long even after releasing the mouseclick. And then it would change back to .button:hover{ - whatever -}

---

Solution :

Imo it is not possible within css. In Java code you can use

@Override
public void start( Stage primaryStage )
{
    final Button btn = new Button( "Say 'Hello World'" );
    final PauseTransition pt = new PauseTransition( Duration.millis( 3000 ) );
    pt.setOnFinished( ( ActionEvent event ) ->
    {
        btn.getStyleClass().remove( "my-button-pressed" );
    } );

    btn.setOnMousePressed( ( MouseEvent event ) ->
    {
        if ( pt.getStatus() != Animation.Status.RUNNING )
        {
            btn.getStyleClass().add( "my-button-pressed" );
            pt.play();
        }
    } );

    StackPane root = new StackPane();
    root.getChildren().add( btn );

    Scene scene = new Scene( root, 300, 250 );
    scene.getStylesheets().add( this.getClass().getResource( "style.css" ).toExternalForm() );
    primaryStage.setScene( scene );
    primaryStage.show();
}

with style.css like

.my-button-pressed {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}