I'm really struggling to make my head around transitions. I've got a round button and I would like the div to show when the button is hovered. But I would like to have and "(un)fold" effect. Could you help me to add the animation to this css?
var btn = document.getElementById("open_feedback_form");
var x = document.getElementById("title");
btn.addEventListener("click", function() {
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
});.help_button {
position: fixed;
bottom: 10rem;
right: 10rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
line-height: 150%;
color: #ffffff;
}
.feedback-title {
position: fixed;
bottom: 10rem;
right: 12.5rem;
height: 5rem;
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
visibility: hidden;
}<div class="feedback-title" id="title">Feedback form</div>
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
</button>I'm not even sure whether my approach here is correct.
Best practice for an unfold effect should be using the transform 3d properties. Wrap the feedback form in a container and transform the inner element from 100% from the x-as to 0%.
* {
margin: 0;
padding: 0;
}
.button-wrapper {
position: relative;
display: inline-block;
margin: 50px;
cursor: pointer;
}
.button-helper {
white-space: nowrap;
position: absolute;
right: 0;
top: 50%;
z-index: -1;
transform: translate3d(0, -50%, 0);
transition: .5s ease;
}
.button {
padding: 10px 30px;
}
.button-wrapper:hover .button-helper {
transform: translate3d(calc(100% + 15px), -50%, 0);
}<button class="button-wrapper" type="button">
<p class="button-helper">Button info label</p>
<div class="button">
button text
</div>
</button>