Animating elements with a right-to-left transform in CSS

In my current project, I am implementing a navigation bar that slides a menu from right to left. When the user clicks on their profile picture, the hidden menu is revealed.

To achieve this functionality, I utilize the addition of classes hidden and show to toggle the visibility of the menu.

$(document).ready(function(){
    $(".img-profile").click(function(){
        $(".menu-wrapper").addClass("show");
    });
    $(".menu-bg").click(function(){
        $(".menu-wrapper").removeClass("show");
    });
});

CSS

.show{
    display: inline-block !important;
}
.hidden{
    display: none;
}

The issue arises when attempting to animate the menu using transitions. Even with the specified transition properties from transition: all 0.2s linear 0s and transform values from 250px to 0, the animation does not occur as intended.

.menu-wrapper > .login-menu{
    background-color: #fff;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    right: 0;
    width: 250px;
    z-index: 5;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.2s linear 0s;
    transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
  transform: translateX(250px);
}

Additionally, I aim to add an animation effect for closing the menu from right to left.

You can view the complete code on JSFIDDLE

javascriptjqueryhtmlcss

Answer №1

When attempting to initiate animations, it is important to note that changing the display CSS attribute will not do the trick. Instead, consider using the visibility attribute as it is known to trigger animations successfully.

If you find yourself in a situation where utilizing display is necessary, make sure to first set the display attribute to reveal the element while keeping the visibility hidden. Subsequently, adjust the visibility to visible in order to activate the animation effect.

Edit: Following an examination of your fiddle, avoid using the .hidden class due to bootstrap's implementation of display:none on such elements. Simply utilize the .show class by incorporating visibility:visible within it, while setting visibility:hidden for the .menu-wrapper element. By removing all display:none lines from your CSS, you should encounter no issues moving forward.

Answer №2

Here is a nifty little trick you can try.

<header class="header">
<div class="container">
    <a class="logo" href="/"></a>
    <div class="login">
        <div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>

            <div class="login-menu">
                <div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
                <p>Mark Zuckerberg</p>
                <button type="button" class="btn btn-danger btn-block">Logout</button>
            </div>
            <div class="menu-bg"></div>
        </div>
    </div>


.header{
    width: 100%;
    height: 50px;
    background: #fff;
    border-bottom: 2px solid #ececec;
}
.header > .container{
    height: 100%;
    position: relative;
}
.logo {
    background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
    display: inline-block;
    width: 23rem;
    height: 100%;
}
.select-lang {
    display: inline-block;
    position: absolute;
    top: 15px;
}
.login{
    position: absolute;
    right: 0;
    top: 0;
}
.img-profile{
    background: no-repeat scroll center center / contain;
    position: relative;
    top: 3px;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    display: block;
    margin: auto;
}
.login > .menu-wrapper{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
    height: 100%;
    width: 100%;
}
.login-menu{
    background-color: #fff;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 40px;
    right: -250px;
    width: 250px;
    z-index: 5;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.2s linear 0s;
}
.show{
  right: 0;
}
.hidden{
    right: -250px;
  }
.login-menu > .img-profile {
    border-radius: 70px;
    height: 70px;
    width: 70px;
}
.login-menu > p {
    font-weight: bold;
    margin: 10px 0 20px;
}
.menu-wrapper  > .menu-bg{
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

$(document).ready(function(){
    $(".img-profile").click(function(){
        $(".login-menu").addClass("show");
    });
    $(".img-profile").click(function(){
        $("body").removeClass("show");
    });
});

Answer №3

Check out this link for a demonstration of the code below:

$(".myButton").click(function () {

    // Define the effect type
    var effect = 'slide';

    // Define options for the chosen effect type
    var options = { direction: $('.mySelect').val() };

    // Set the duration to 500 milliseconds
    var duration = 500;

    $('#myDiv').toggle(effect, options, duration);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the anonymous function to drop the object scope?

Is it important for the anonymous function/closure to retain the scope of the object where it originated? var person = { name: "John", func: function() { var self = this; console.log("outer function: this.name = " + this.name); console.log("ou ...

javascript

Linking an image to a database-stored value through a hyperlink

My goal is to give users the option to link their social media accounts such as Facebook and Twitter, with each link displaying an image that corresponds to the platform. The intention is for these images to direct them to the links stored in the database. ...

htmlasp.net-mvc-3sql-server-2008-r2

Error: Uncaught ReferenceError - 'channel' has not been defined

I'm currently working on a Discord bot that is designed to handle tickets and I'm facing an issue with sending messages in the newly created channel I attempted using .then, but for some reason it's not functioning as expected and I'm ...

javascriptnode.jsdiscordbotschannel

Troubleshooting a layoutUnit problem with Primefaces southern region

I'm encountering an issue with my PrimeFaces layout. The south layoutUnit is not displaying on the page, and I am unsure why. Below is the code for the page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ ...

htmlcssjsf-2primefaces

Beginner Polymer Kit including Node, Express, and Puppeteer for a seamless development experience

Hey there, I'm completely new to this so any guidance would be greatly appreciated. I've recently figured out how to use Node and Express to serve a Polymer Starter Kit (PSK) website from the Polymer build directory by creating a server.js file ...

javascriptnode.jsexpresspolymerpuppeteer

Implementing a progress bar in Rails 4 to delete a remote file using Fog and waiting for controller respond_to

I've been searching for solutions to implement a progress bar in my Rails 4 application. I have a scenario where users can delete images associated with a record, and the images div is updated via jQuery after deletion. However, since the deletion pro ...

jqueryruby-on-rails-4fog

What is the most efficient way to transfer an item from one component to another in React

When I try to assign one object into another, it does not get added as a key in the new object. var check = Object.assign(product, cart_item); If you look at the image below https://i.sstatic.net/jf2xK.png I would appreciate any insights on how can I add ...

javascriptreactjs

Issue with Material Table not refreshing data after mutation occurs

Whenever a user includes more details, a mutation is performed in the database to add the new information. Subsequently, the local state is updated to include the new data in the lead. Although my mutation and state update successfully, there seems to be ...

javascriptreactjsmaterial-uimaterial-table

Tips for testing the setTimeout function within the ngOnInit using Jasmine

Could someone please assist me with writing a test for an ngOnInit function that includes a setTimeout() call? I am new to jasmine test cases and unsure of the correct approach. Any guidance would be greatly appreciated. app.component.ts: ngOnInit(): void ...

javascriptangulartypescriptkarma-jasmine

Creating dynamic divs with ng-repeat in AngularJS

As someone who is new to angularjs, I am looking for a way to dynamically add a div by clicking on an add icon. I have written some script for this purpose. This is the HTML section: <div ng-show="child" class="childDiv" data-ng-repeat="choice in choi ...

htmlangularjsangularjs-ng-repeatangularjs-ng-model

Div displaying with extra space below

UPDATE check out the new jsfiddle link here that effectively showcases the problem I am encountering an issue with white space appearing below my div. This can be seen in 2 photos, one of which is scrolled down: https://i.sstatic.net/yHlXL.png https:// ...

htmlcsstwitter-bootstrap-4

Guide to executing the "brew" command on a Windows operating system

Encountering the error message "'brew' is not recognized as an internal or external command" in the Windows command prompt. https://i.sstatic.net/suFT2.png Attempting to set up the codeigniter-reactjs-example project from github, where the init ...

phphtmlcodeigniterreactjscommand

Help me locate the error in this AngularJS mini evaluation, please

Check out the code here! Hello, you can find the code on the provided link. This is the HTML snippet: <div ng-app="testApp" ng-controller="myController"> <select name="current" id="current" ng-model="currentliga"> <option ng-rep ...

javascriptangularjs

How can I address the issue of having multiple console logs within the

I am facing an issue where my code is logging to the console 3 times upon page load and incrementing its index. I cannot figure out why this is happening despite attempting to make adjustments within a useEffect. My project involves using the typewriter-ef ...

javascriptreactjsnext.js

Loop through an array of buttons using an event listener

My HTML and Javascript code currently have the functionality to show/hide a row of 3 images upon button click. However, I need this feature to work for two additional rows similar to this one. I believe it involves looping through an array of buttons, but ...

javascripthtmlarraysevent-listener

The responsiveness of Slick Slider's breakpoints is malfunctioning

After implementing a slider using slick slider, I encountered an issue with the width when testing it online and in a normal HTML file. If anyone could assist me in resolving this issue, I would greatly appreciate it. Please inspect the code for both scen ...

javascriptjqueryhtmlcssslick.js

Obtain a string with commas separating the elements of an array

In my JavaScript code, I am working with the following JSON data. { "url":"http://example.com/main.aspx", "report_template_id":"1", "interval_secs":"86400", "analysis_type":"lite", "email":"<a href="/cdn-cgi/l/email-protection" class="__ ...

javascriptjqueryjson

Adding a dynamic gif over an image in an HTML email through Outlook

I'm struggling with overlaying a gif image on top of a jpeg in an HTML email, but for some reason it's not functioning as expected. Below is the code I've been examining: <table id="headerAnimation"> <!--[if !mso]><! ...

htmlemailoutlook

Ways to prevent background replacement in CSS

Recently I came across this snippet of code: .active { background-color: black; color: white; } span { margin: 10px; } a { text-decoration: none; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .tabButton { margi ...

htmlcss

Implementing a customized mobile style sheet for Google Maps v3

Currently, I am attempting to enforce the Mobile stylesheet for Google Maps v3 JavaScript within a jQueryMobile application. Within the screen stylesheet, the zoom control consistently stays in the top left corner and my efforts to relocate it have proven ...

cssjquery-mobilegoogle-maps-api-3