Cause and effect

Cause and effect can illustrate to the user the potential effects of their actions.

As we learned earlier can use animation to illustrate cause and effect, so we’re going to focus on conveying cause and effect in this exercise.

Some elements on this page will be given the classes .show {} or .hide {}, by clicking on different buttons.

div.show {}
div.hide {}

We’ve taken care of the javascript side of this - what we want you to do is create different animations based on these two classes, .show {} and .hide {}, on different elements on the page.

For example, clicking on the hamburger icon with the class .sidebar—toggle {} adds the class .show {} to the sidebar

.sidebar.show {}

Part 2.1 Conveying cause and effect

We can use these classes to activate different CSS animations based on whether an element is shown. For example, if I want my sidebar menu to slide in from the left, I can use the .show {} class along with the .sidebar {}.

In order to achieve this - we’ll apply transitions to the two classes: ‘.sidebar.show {}’ and ‘.sidebar.hide {}’

Let's set transform values, so that when the sidebar hides, we’ll make it transform on the X axis, the negative value of the sidebar's width (300px):

.sidebar.hide {
  transform: translateX(-300px);
}

Now we can do the same transform for showing the sidebar, except in reverse (animating from translateX(-300px) to translateX(0px)):

.sidebar.show {
  transform: translateX(0px);
}

The sidebar's toggling as we'd expect it, but without the nice transitions. Let's add a transition to the .sidebar {} selector so that it always transitions transforms:

.sidebar {
  transition: transform 1s;
}

We’ve now shown and hidden the sidebar with some nice keyframe animations, great!

2.2 Hinting on :hover

We can guide the user by hinting to them the potential results of their actions.

Let’s create a hover transition that indicates to the user that the sidebar will be made visible when they click on the button.

/** Sidebar hover hint  **/
.sidebar:not(.show):hover {
  transform: translateX(-290px);
}