Bugzilla – Full Text Bug Listing
| Summary: | [Animation] extend hover effect | ||
|---|---|---|---|
| Product: | [RT] RAP | Reporter: | Stefan Röck <stefan.roeck> |
| Component: | RWT | Assignee: | Project Inbox <rap-inbox> |
| Status: | NEW --- | QA Contact: | |
| Severity: | enhancement | ||
| Priority: | P3 | CC: | tbuschto |
| Version: | 1.3 | ||
| Target Milestone: | --- | ||
| Hardware: | PC | ||
| OS: | Windows 7 | ||
| Whiteboard: | |||
| Bug Depends on: | |||
| Bug Blocks: | 324438 | ||
What background does the button have when not hovered? What is the desired effect? You can currently only animate from one gradient to another or from one solid color to another. Ok, I understand. As a workaround, defining a trivial gradient with the same start and stop color works.
However, defining a animation from no background (transparent) to a gradient cannot be achieved this way.
Button[PUSH].animationBackgroundImage {
background-color: transparent;
/*background-image: gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff) );*/
animation: hoverIn 200ms linear, hoverOut 500ms ease-out;
}
Button[PUSH].animationBackgroundImage:hover {
background-image: gradient(linear, left top, left bottom, from(#ffffff),
color-stop(49%, #FFECAC), color-stop(50%, #FFDA59), to(#FFFCDF) );
}
I think these hover-effects (solid-to-gradient and transparent-to-solid/gradient) are a valid usecase and doable in theory. It would also be nice to extend the hover effect to the border, though possibly problematic. (I have seen several cases where this could be useful, e.g. the business/fancy themes menubar.) I will investigate the posibility to implement those features when i have some time on my hands. |
The following css doesn't work (no animation): Button[PUSH].animationBackgroundImage { animation: hoverIn 200ms linear, hoverOut 500ms ease-out; } Button[PUSH].animationBackgroundImage:hover { background-image: gradient(linear, left top, left bottom, from(#ffffff), color-stop(49%, #FFECAC), color-stop(50%, #FFDA59), to(#FFFCDF) ); }