-
Notifications
You must be signed in to change notification settings - Fork 0
transitions
#Transitions
We have an slishow, now we would like to apply some effects to hide the buttons when the mouse isn't over the image in the viewport.
##Background We have an slideshow that works changing the position of a div, and 2 butons in both sides of the viewport of the slider, we would like to hide the buttons and show them when the mouse is over the viewport.
##Problem How to hide the buttons of a slider using transitions?
##Constrains
- The buttons must to be showed only when the mouse is over the viewport of the slideshow, otherwise must be hidden.
- The buttons must be one on each side and over the images.
- When the buttons are shown must be overlie to viewport.
- The buttons must make a linear transition from outside to inside of the viewport when the mouse is over, and the opposite when the user removed the mouse.
- The buttons can't have effects when they are pressed.
##Hypothesis By changing the horizontal position to the buttons with transition style properties, applying this to their container, which in turn has the overflow property as hidden, we can show the buttons only when the mouse is over their container.
##Solution proposal We can divide the project in the following modules to describe the things that I we to solve:
- How to dissapear and appear the buttons when the mouse is over?
- How to superimpose the buttons over the images?
- How to make a transition effect?
+--------+ +--------+
| | | |
| / | | \ |
| / | | \ |
| \ | | / |
| \ | | / |
| | | |
+--------+ +--------+
Superimposing the buttons: We can achieve this using the position property as relative in the buttons and the elements that are behind these.
Transition effect: setting the transition property to a container of both buttons when the mouse is over this one.
We have only 2 states:
- When the mouse is over - the buttons are showed.
- When the mouse isn't over - the buttons aren't showed.
+----------------------+
| The slider is showed | <----+
+-----------+----------+ |
| |
+-----------v----------+ |
| | |
| When the user pass | |
| the mouse over, each | |
| button is showed. | |
| (from outside to | |
| inside of the | |
| viewport) | |
| | |
+-----------+----------+ |
| |
+-----------v----------+ |
| When the user remove | |
| the mouse from the | |
| viewport the buttons | |
| go from inside to | |
| outside in | |
| hidden mode | |
+-----------+----------+ |
| |
+-----------------+
It only shows the viewport.
When the user pass the mouse over the container (that wrap the buttons and the viewport) appears (with transitions styles) the side buttons from outside to inside of the viewport.
When the user removes the mouse from the container, the buttons make a transition style effect going from inside to outside of the viewport, to be hidden.
By wrapping the buttons in divs, we can control them easily their position:
<div><button></button><div>
Also we can wrap both buttons and slider in a container to then apply the transitions and hidden effect.
<div id="container">
<div class="btnContainer"><button></button><div>
<div><img id="slider"><div>
<div class="btnContainer"><button></button><div>
</div>
And because we are using buttons but we don't want the default effect, we remove this with some style:
button, button:focus, button:hover, button:active {
outline: none;
border: none;
box-shadow: none;
background: none;
}
With the position property as relative in all the in question we can make the overlayer effect, also by setting the display property as flex in the container buttons and the main container we can center the elements all the time.
.btnContainer {
position: relative;
align-items: center;
display: flex;
}
#container {
position: relative;
display: flex;
overflow: hidden;
}
To apply the transition effect when the mouse is over the viewport, we can select the main container and apply a hover effect to his buttons sons.
#container:hover > .btnContainer {
}
We use > as a selector that indicates that we want to affect the child of the div container.
by changing the position of each buttonContainer with an transition-property that also has the transition-timing-function as ease we can achieve the desired linear movement. Also we need to use the prefixes to be sure that this property will work in all browsers.
#container:hover > .btnContainer {
left: -400px;
transition: left .2s ease;
-moz-transition: left .2s ease;
-webkit-transition: left .2s ease;
-o-transition: left .2s ease;
-ms-transition: left .2s ease;
}
We can apply the transition-duration as we want.
To hide the buttons when the mouse isn't over, we set the property overflow: hidden to the container, and we set the position of the buttons outside this container as their initial position.
+-------------+ +-------------------+ +----------------+ +------------------+
| | | Needs the `Holder`| | | |Which in time |
| The buttons +---> selector on their +--> Div Container +-->needs to have |
| | | parent container | | | |the transitions |
+-------------+ | to be activated. | +----------------+ |effects apply it |
| | |to their buttons |
+-------------------+ |sons |
+------------------+
- It will work if the transition property permits, considering the prefixes.
+-----------------------------+-------------------------------+
| DOM | UI |
+-------------------------------------------------------------+
| | |
| The DOM is loaded | |
| + | |
| | | The user pass the mouse |
| +-------------------> over the slider viewport |
| | + |
| | | |
| The buttons active their | | |
| transitions style and make | | |
| a movement to be showed <--------------+ |
| from outside to the inside | |
| of the slider viewport | |
| + | |
| | | The user remove the mouse |
| +-----------------> from the slider viewport |
| | + |
| | | |
| | | |
| The buttons go out from the | | |
| slider viewport making a <---------------+ |
| transition from inside to | |
| outside. | |
| | |
| | |
| | |
+-----------------------------+-------------------------------+
- The buttons appears from outside to inside when the mouse is over the viewport?
- If the mouse isn't over the viewport, the buttons are hidden?
- The buttons only move in horizontal way with the transitions?