Question 245693 in CSS Question posted in
Some basic documentation can be found here.

Css – How to apply smooth animation to the display of actions on a floating actions button?

I have code in reactjs that aims to display a floating actions button in the bottom right corner of the screen. However, I need to apply a smooth animation when displaying the FAB actions so that they come out smoothly from behind the main (share) button, as in this example I found on jsfiddle FAB slow

To solve my problem I applied some transition and transform in my css, however, it didn’t work. In the FAB component there is an open state that controls whether the FAB is open and in the Action component there is a className={fab-action-button ${open ? "open" : ""}}. I expected that by applying transition and transform to some css classes, smooth animation would work. See some excerpts from the css code and the complete codepen code.

.fab-container {
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    margin: 0;
    padding: 0;
    bottom: 10px;
    right: 10px;
    transition: all 0.2s ease-in-out;
    z-index: 1000;
}
.fab-action-button {
    background-color: #fff;
    box-shadow: 0 3px 6px lightgrey;
    padding: 8px 0;
    margin: 10px;
    position: relative;
    z-index: 2;
    transform: translateY(20px) scale(0);
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}

.fab-action-button.open {
    transform: translateY(0) scale(1);
    opacity: 1;
}

Complete codepen code

PS: Someone help me please, I need to solve this problem.

Tags:

3

Answers


  1. 0

    What I guess from dabbling with your code is that the elements do not exist on the page. They get added when I hover over the button on the left bottom corner.

    You need to have those elements mounted on the page first. Then you can apply css transition on them.

    So the hover css properties do not have any effect in your code!

    So in the codepen you provided, change:

                {open &&
                actions.map((action, index) => (
                    <Action
                        key={index}
                        label={action.label}
                        icon={action.icon}
                        onClick={handleActionClick}
                        open={open}
                    />
                ))}

    TO:

                {
                actions.map((action, index) => (
                    <Action
                        key={index}
                        label={action.label}
                        icon={action.icon}
                        onClick={handleActionClick}
                        open={open}
                    />
                ))}

    Hope this helps.

    Login or Signup to reply.
  2. 0

    Not 100% sure if this will help but I hope it does:
    Is the problem that the animation doesn’t happen at all or that it’s not smooth?
    If the smoothness is the issue, perhaps slightly increasing your ease time might help. Might also be good to add it to both the transform and the opacity.

    Login or Signup to reply.
  3. 0

    Sometimes i find changing container to container-fluid greatly help with the CSS output like this.

    Instead of having .fab-container change the HTML so you can use

    I hope this helps.

    .fab-container-fluid {
display: flex;
flex-direction: column-reverse;
position: fixed;
margin: 0;
padding: 0;
bottom: 10px;
right: 10px;
transition: all 0.2s ease-in-out;
z-index: 1000;

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search