I have a hamburger (three horizontal bars) icon I want to change from float: left
to float:right
but with a smooth animation.
I can't use jQuery but I can use JavaScript so I have this small function that changes float state when the image is clicked:
var menuButton = document.getElementById('menu-button');
menuButton.onclick = function () {
menuButton.style.float = "right";
}
So this works but not smooth animation how can I make it a smooth animation?
A running demo:
var menuButton = document.getElementById('menu-button');
menuButton.onclick = function () {
menuButton.style.float = "right";
}
nav {
background: pink;
height: 60px;
}
nav #menu-button {
margin: 20px 24px;
display: inline;
float: left;
}
<nav id="nav-bar">
<a href="#/index"><img id="menu-button"alt="menu icon" src="images/toggle-open.svg"></a>
</nav>
I have a hamburger (three horizontal bars) icon I want to change from float: left
to float:right
but with a smooth animation.
I can't use jQuery but I can use JavaScript so I have this small function that changes float state when the image is clicked:
var menuButton = document.getElementById('menu-button');
menuButton.onclick = function () {
menuButton.style.float = "right";
}
So this works but not smooth animation how can I make it a smooth animation?
A running demo:
var menuButton = document.getElementById('menu-button');
menuButton.onclick = function () {
menuButton.style.float = "right";
}
nav {
background: pink;
height: 60px;
}
nav #menu-button {
margin: 20px 24px;
display: inline;
float: left;
}
<nav id="nav-bar">
<a href="#/index"><img id="menu-button"alt="menu icon" src="images/toggle-open.svg"></a>
</nav>
Share
Improve this question
edited Feb 4, 2022 at 10:01
Brian Tompsett - 汤莱恩
5,89372 gold badges61 silver badges133 bronze badges
asked Oct 11, 2015 at 19:03
JekaJeka
1,7003 gold badges23 silver badges38 bronze badges
4
- 1 @PraveenKumar: The second sentence literally starts with "I can't use jQuery" – Madara's Ghost Commented Oct 11, 2015 at 19:07
- My eyes are deceiving me!!! @MadaraUchiha!!! LoL. – Praveen Kumar Purushothaman Commented Oct 11, 2015 at 19:09
-
I think you would have to approach it by using a custom setInterval tweening function on a property such as
left
ormarginLeft
. CSS as far as I know cannot support float transitions smoothly. – David Li Commented Oct 11, 2015 at 19:12 - this should help css-tricks./… – Ekansh Rastogi Commented Oct 11, 2015 at 19:26
4 Answers
Reset to default 4If you know the width of your container, do not use float
properties but margin-left
:
a {
margin-left: 0;
transition: margin-left 1s ease-in-out;
}
a.right{
margin-left: 400px; /* change for good value */
}
Then add right
class to your a
element with javascript
https://jsfiddle/rd4h4s5h/
Unfortunately, changing left-to-right float can't be simply animated with any current tech, because an animation requires a relative anchor-point from which to perform calculations.
What you could do is animate the relative left-floated position, to an approximated right-floated position (by increasing left-margin, for example), and upon pletion, change to a right-float. But really, the last step isn't necessary, except to handle future layout changes to the page (e.g. window resize, for a fluid-width site).
I was able to get this working using CSS3 transitions and marginLeft.
There's a little hackery in the parentElement.parentElement (to climb two levels of the DOM tree), and in the -44px to account for the icon width plus margin width, but if you wanted to, you could write more plex coded solutions to these (handling the element's actual width / margin on the fly).
var menuButton = document.getElementById('menu-button');
menuButton.onclick = function () {
var left = menuButton.parentElement.parentElement.clientWidth - 44;
menuButton.style.marginLeft = left+"px";
window.setTimeout(function() {
menuButton.style.float = "right";
}, 1000);
}
nav {
background: pink;
height: 60px;
}
nav #menu-button {
margin: 20px 24px;
display: inline;
float: left;
/* Width and height hack to represent missing image's height and width */
width: 20px;
height: 20px;
/* CSS Transition added */
-webkit-transition: margin-left 1s;
transition: margin-left 1s;
}
<nav id="nav-bar">
<a href="#/index"><img id="menu-button"alt="menu icon" src="images/toggle-open.svg"></a>
</nav>
I would do it this way:
<style>
nav {
position: relative;
}
nav a {
position: absolute;
left: 0;
transition: left 1s linear;
}
</style>
<nav id="nav-bar">
<a id="box" href="#/index"><img id="menu-button" alt="menu icon" src="images/toggle-open.svg"></a>
</nav>
<script>
const navBar = document.getElementById("nav-bar");
const box = document.getElementById("box");
const menuButton = document.getElementById("menu-button")
menuButton.addEventListener("click", (e) => {
box.style.left = (navBar.offsetWidth - box.offsetWidth) + "px";
});
</script>
There is a solution now, you could go a different way, achieving EXACTLY what you were trying to: https://stackoverflow./a/75443310/3936149
.btn {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 1.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.contact-us-hero-btn {
border-radius: 27px;
width: 70%;
text-align: left;
border: 0px;
background: #2f2f2f;
padding: 8px !important;
position:relative;
container-type: inline-size;
}
.contact-us-hero-btn:hover .contact-us-circle {
/*position: absolute;*/
-webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(100cqw - 100%));
transform: translateX(calc(100cqw - 100%));
}
}
@keyframes slide-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(100cqw - 100%));
transform: translateX(calc(100cqw - 100%));
}
}
.contact-us-hero-btn svg {
fill: yellow;
}
<button class="btn btn-outline-secondary mt-5 py-2 contact-us-hero-btn text-white" data-action="scroll-to-contact" listener="true">
<svg xmlns="http://www.w3/2000/svg" width="27" height="27" fill="currentColor" class="bi bi-circle-fill contact-us-circle" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="8"></circle>
</svg>
</button>