JavaFX中CSS的transition时间与transform函数失效问题求助

问题1：过渡时长未生效 #

JavaFX CSS不支持标准Web CSS的transition属性，必须使用JavaFX专属的过渡语法。需要将原代码中的transition替换为JavaFX的-fx-transition，同时确保仅使用JavaFX支持的带-fx-前缀的CSS属性。

问题2：transform: rotate()报错 #

JavaFX CSS没有transform属性，旋转效果需要使用专属的-fx-rotate属性，不能采用标准CSS的transform: rotate()函数写法。

修改后的完整CSS代码 #

.menu_bar {
    -fx-background-color: #FFC7C7;
}

.menu_bar Button {
    -fx-background-color: transparent;
    /* 将过渡规则写在默认样式中，确保移入移出都有动画 */
    -fx-transition: -fx-scale-x 8s, -fx-scale-y 8s, -fx-rotate 0.8s;
}

.menu_bar Button:hover {
    -fx-scale-x: 1.2;
    -fx-scale-y: 1.2;
    -fx-rotate: 30deg;
}

关键说明 #

• 过渡规则需定义在按钮的默认样式内：如果仅写在hover状态中，只有鼠标移入时会触发动画，移出时会瞬间恢复初始状态；写在默认样式里则双向都有过渡效果。
• 替换旋转属性：-fx-rotate是JavaFX CSS专门用于控制旋转的属性，直接传入角度值即可生效。
• 仅使用JavaFX兼容属性：所有JavaFX CSS支持的样式属性都带有-fx-前缀，标准Web CSS属性多数无法在JavaFX中正常工作。

内容的提问来源于stack exchange，提问作者Rei