Does styling opacities conflict with animation opacities?

[David Grieve]

On Aug 30, 2012, at 10:36 AM, Richard Bair wrote:

> Hi Randahl,
> 
>> This means our tool tips are just enough transparent that you can vaguely see the content behind it. To make the tool tips look nicer, we decided to animate then, so now when showing the tool tip, we fade it in by gradually changing its opacity from 0.0 to 1.0 using a FadeTransition. So up pops the question: What will the opacity be, once the fade transition ends? Will it be the 0.8 from the CSS, or the 1.0 from the FadeTransition?
> 
> The problem here is that whenever you set a property both from CSS and from code, code not only will always win, but will disable that property from being set from CSS henceforth. We used to have the rule that "last applied wins" or "CSS always wins", and this led to very unsettling behavior to developers. The current behavior appears to be much more intuitive. However it means that until CSS animation support is added, you won't be able to both style from CSS and animate the styled property :-(.

This is not entirely correct. If I have

Rectangle rect = new Rectangle(10,10);
rect.getStyleClass().add("rect");
rect.setOpacity(.5);

And this CSS in an inline style or an author stylesheet:

.rect { -fx-opacity: .8; } 

Then the opacity will be set to 80% since an inline or author style overrides a user set style. If the same style was in a user agent stylesheet, then the user agent style would be overridden by the call to setOpacity (more correctly, the style will not override the call to setOpacity). 

The reason the Tooltip doesn't end up at .8 is because CSS is not applied to it after the tooltip is shown. It is styled once, but there is no reason to style it again. You can test this by adding a style for the tooltip's hover pseudo-class, for example,

.tooltip:hover { -fx-fill: red; }

Hover over the tooltip and back out again and the opacity will be reset to 80%. 

As a hack, you can add an onFinished event handler to the transition that forces CSS to be updated by calling impl_processCSS(false) on the skin.

    final FadeTransition ft = new FadeTransition(Duration.millis(1000), tooltip.getSkin().getNode());
    ft.setFromValue(.0);
    ft.setToValue(1.0);
    ft.setOnFinished(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent t) {
            tooltip.getSkin().getNode().impl_processCSS(false);
        }
    });
    ft.play();

> 
> The CSS engine though is completely in the open source, and at least at one time we had a fairly simple idea as to how to go about doing the animations. Perhaps you could work with David and contribute some code for CSS Animations for FX 8?
> 
> In the meantime, your application will either have to set the opacity exclusively from code, or from CSS. Alternatively you could do some hack, for example having an empty Group in your app with the same style class as the tooltip. Then the Group will have whatever opacity you set from CSS for your Tooltip. Then when you animate you can animate from the current value to whatever value the Group says it should be (but animating the tooltip of course).
> 
> Thanks
> Richard


David Grieve | Principal Member of Technical Staff
Mobile: +16033121013 
Oracle Java Client UI and Tools
Durham, NH 03824 
 Oracle is committed to developing practices and products that help protect the environment