--- a/modules/javafx.graphics/src/main/docs/javafx/scene/doc-files/cssref.html +++ b/modules/javafx.graphics/src/main/docs/javafx/scene/doc-files/cssref.html @@ -253,6 +253,7 @@
  • Naming Conventions
  • CSS Public API
  • Inheritance
    • +
  • Transitions
  • @ Rules
  • Examples
  • Understanding Parser Warnings
    • @@ -277,6 +278,7 @@
  • <font>
  • <paint>
  • <color>
    • +
  • <easing-function>
  • <text-bounds>
    • @@ -680,6 +682,91 @@ inherited provided there is not an author or an inline-style that applies specifically to that node. In this case, the inherited font is created from the user-set font and any parts of the applicable author or in-line style. + +

    Transitions

    +

    JavaFX supports implicit transitions for properties that are styled by CSS. When a property value is + changed by CSS, it transitions to its new value over a period of time. Implicit transitions are supported for + all primitive types, as well as for types that implement javafx.animation.Interpolatable.

    +

    Transitions can be defined for any node in the JavaFX scene graph with the following properties:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Transition Properties
    CSS PropertyValuesDefaultComments
    transition‑property[ none | all | <custom‑ident># ]allThe name of the CSS property to which the transition is applied.
    transition‑duration<duration>#0sThe duration of the transition, not including an optional delay before the transition starts.
    transition‑timing‑function<easing‑function>#easeThe easing function that is used to calculate the intermediate values.
    transition‑delay<duration>#0sThe delay after which the transition starts. If a negative delay is specified, the transition starts + as if it had already been running for the specified time.
    transition + <single-transition># +

    + where <single‑transition> = [ none | all | <custom‑ident> ] || + <duration> || + <easing‑function> || + <duration> +     		Short-hand notation for the individual properties. Note that while the order of the values generally + doesn't matter, the first duration is always assigned to the transition-duration + property, while the second duration is always assigned to the transition-delay + property.
    +

    A transition is not started (or cancelled if already running) in any of these scenarios: +

      +
    1. The property value is set programmatically
      2. +
    2. The property is bound
      3. +
    3. The node (or any of its parents) is invisible, as indicated by the + Node.visible property
      4. +
    4. The node is removed from the scene graph
      5. +
    +

    + Nodes fire TransitionEvent to signal the creation, + beginning, completion and cancellation of transitions. +

    Example

    +

    A button that smoothly changes its opacity on mouse-hover can be defined in a stylesheet like this:

    +

    + .button {
    +     -fx-opacity: 0.8;
    +     transition-property: -fx-opacity;
    +     transition-duration: 0.5s;
    + }
    +
    + .button:hover {
    +     -fx-opacity: 1;
    + } +

    +

    @ Rules

    Beginning with JavaFX 8u20, the CSS @@ -800,6 +887,8 @@ sheet.

  • When parsing a URI, the parser doesn't handle URI escapes nor \<hex-digit>[1,6] code points.
    • +
  • JavaFX CSS does not combine short-hand and long-hand property notations in a declaration block. + Using both notations in a single declaration block may lead to unexpected results.

    • Types

    inherit

    @@ -1579,6 +1668,128 @@ href="#typecolor" class="typelink"><color> ) ]+

    + +

    <easing-function>

    +

    linear | <cubic-bezier-easing-function> | <step-easing-function> | <fx-easing-function>

    +

    Linear linear
    + The linear easing function is a simple linear mapping from the input progress value to the output progress value.

    +
    + Linear easing function +
    +

    Cubic Bézier Easing Functions <cubic-bezier-easing-function>

    +

    ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)

    +

    The values have the following meaning:

    + + + + + + + + + + + + + + + + + + + + + +
    easeequivalent to cubic-bezier(0.25, 0.1, 0.25, 1)
    ease-inequivalent to cubic-bezier(0.42, 0, 1, 1)
    ease-outequivalent to cubic-bezier(0, 0, 0.58, 1)
    ease-in-outequivalent to cubic-bezier(0.42, 0, 0.58, 1)
    cubic-bezierdefines the control points P1 and P2 using four real numbers: (xP1, yP1, xP2, yP2)
    +

    A cubic Bézier function is defined by four control points, where P0 is fixed at (0,0) and P3 is fixed at (1,1). + P1 and P2 are restricted to the interval [0,1] on the input progress axis:

    +
    + Cubic Bèzier easing function +
    +

    Step Easing Functions <step-easing-function>

    +

    step-start | step-end | steps(<integer>[,<step-position>]?)

    +

    where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end

    +

    The values have the following meaning:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    step-startequivalent to steps(1, start)
    step-endequivalent to steps(1, end)
    stepsdefines a step function with <integer> intervals + and an optional <step-position>;
    if omitted, + end is implied +

    jump-startthe interval starts with a rise point when the input progress value is 0
    jump-endthe interval ends with a rise point when the input progress value is 1
    jump-noneall rise points are within the open interval (0..1)
    jump-boththe interval starts with a rise point when the input progress value is 0, + and ends with a rise point when the input progress value is 1
    startequivalent to jump-start
    endequivalent to jump-end
    +

    Examples of step easing functions:

    +
    + jump-start easing function +
    steps(3, jump-start)
    +
    +
    + jump-end easing function +
    steps(3, jump-end)
    +
    +
    + jump-none easing function +
    steps(3, jump-none)
    +
    +
    + jump-both easing function +
    steps(3, jump-both)
    +
    +

    SMIL 3.0 Easing Functions <fx-easing-function>

    +

    -fx-ease-in | -fx-ease-out | -fx-ease-both

    +

    The values have the following meaning:

    + + + + + + + + + + + + + +
    -fx-ease-inSMIL 3.0 ease-in function with an acceleration factor of 0.2
    -fx-ease-outSMIL 3.0 ease-out function with a deceleration factor of 0.2
    -fx-ease-bothSMIL 3.0 ease-in/out function with an acceleration and decelaration factor of 0.2
    +

    These functions are provided for compatibility with javafx.animation.Interpolator + implementations of SMIL 3.0 cubic bezier easing functions.

    +

    <text-bounds>

    The geometry of text can be measured either in terms of the bounds of the particular text to be rendered - visual bounds, or as properties