Figure 1. Animation demonstrating state layer implementation.
State Layers are an interesting solution to a common interactivity problem: you can’t do CSS transitions on non-solid backgrounds. Background gradients and images don’t work with CSS pseudo-classes like :hover and :active, which is a bit of a pain for web developers.
Google came along and came up with something called State Layers, and while I’m almost positive I’m misunderstanding what they meant by the term, I’ve designed LiftKit to have its own version of state layers, which solve this pseudo-class problem.
A state layer in LiftKit is an invisible <div> that sits inside another element and responds to user interactions on its parent. State layers have pointer-events: none; and they respond to :hover, :active, and :focused pseudo-classes.
When a user hovers, clicks, taps, or selects the button with their keyboard, the state layer’s opacity will change.
A great example of state-layer use is in buttons, where the state layer is nothing more than an empty div with the background color set to whatever the button text is. The visual aid below explains how it works. Note that when the cursor hovers over the button, it toggles opacity on the child state-layer element, not the parent itself.
“State” is used a lot in modern programmming, but its meaning varies slightly depending on the context in which it’s used. In React, “State” refers to a very specific programming concept central to its component-based infrastructure. In DevOps workflows, State can refer to something else entirely, such as the state of a container.
LiftKit uses “state” in a general sense. The “state” of an element in LiftKit refers to how the user is currently interacting with it. Borrowing from material, an element’s state can be any of the following:
.state-layer {
z-index: 0;
opacity: 0;
pointer-events: none;
background-color: #000;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
transition: opacity 0.2s ease;
}
*:hover > .state-layer{
opacity: 0.08;
}
*:active > .state-layer{
opacity: 0.14;
}
*:focus > .state-layer{
opacity: 0.14;
}