Highlighting Changes

Highlight changes via AJAX

A common way to highlight changes made to a page via Ajax is the now infamous Yellow Fade Technique. By default, it highlights an element in a browser by flashing the background yellow and then gradually fades it back to white. If the user clicks the “Add to Cart” button, the count would update to two as the line flares brighter. It would then fade back to the background color over a short period of time.

We can implement this with CSS animations. In CSS animations, a class uses the animation attribute to reference a particular animation. The animation itself is defined as a series of keyframes that describe the style of an element at various points in the animation. The animation is executed by the browser when the page loads or when the class is applied to an element. This sounds complicated, but for our case, we only need to define the starting and ending states of the element.

Let’s see the CSS first. We’ll place it inside app/assets/stylesheets/line_items.scss, which was created by the Rails generator we ran back in Connecting Products to Carts.