Using Angular to create dynamic CSS animations

Hey there! I'm currently working on developing a sleek horizontal menu that may have elements extending beyond the window's x-axis. The navigation through the menu is managed by utilizing arrow keys within an Angular controller.

My goal is to incorporate a CSS transition animation that seamlessly shifts the entire menu left or right in response to navigation, ensuring that the active item remains visible at all times. This needs to be achieved without resorting to traditional scrolling, as the window has been set with overflow: hidden.

Initially, I considered using jquery .animate() for this purpose; however, I encountered limitations when attempting to integrate it within an angular controller / directive.

Below is a snippet of the HTML code for the menu:

<section id="catContainer" cat-navigation ng-class="{'disabled': activeLevelIndex > 1}">
        <div ng-repeat="category in categories" ng-class="{'active': $index == activeCatIndex }" class="category selectable">
            <img class="catImg" ng-src="{{category.image}}" />
            <h2>{{category.name}}</h2>
        </div>
    </section>

Furthermore, here is the code that triggers the movement upon pressing the right/left button:

var current = $("#catContainer .category.active");
var left = current.position().left;
var right = left + current.width();
var shift;

if (right > $(window).width)
    shift =  -(1.2 * current.width()) + $("#catContainer").css("left-margin");
else if (left < 0){
    shift =  (1.2 * current.width()) + $("#catContainer").css("left-margin");
}

$("#catContainer").animate({
    "margin-left" : shift
    }, 400, function() {
        console.log("cat anim done.");
    });
$("#catContainer").css("margin-left", shift);

Presently, I can see the "cat anim done" message being logged; however, no discernible change occurs in the layout. Any assistance or guidance on resolving this animation issue would be greatly valued and appreciated.

Answer №1

Hey there, I created this for you.

http://jsfiddle.net/q255npgr/1/

Instead of using JS to animate, it's more efficient and simpler to utilize CSS transitions. Just adjust the left property with JS and let CSS handle the rest.

css:

.item {
    width: 48px;
    height: 48px;
    border: 1px solid red;
    background: black;
    float: left;
    color: #FFF;
}
#mask {
    width: 70px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
#slider {
    top: 0;
    left: 0;
    position: absolute;
    transition: 1s left; //THIS IS THE KEY PROPERTY
    width: 30000px;
    height: 50px;
}

JS:

var posish = 0;

$('#right').click(function(){
    $('#slider').css('left', posish -= 50);
});
$('#left').click(function(){
    console.log('ss', $('#slider').css('left'));
    $('#slider').css('left', posish += 50);
});

html:

<div id="mask">
    <div id="slider">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>
<button id="left"><</button>
<button id="right">></button>

Note: Be sure to include the appropriate browser prefixes based on the browsers you need to support.

In your scenario, you'll be modifying the left property like so:

$("#catContainer").css("left", shift);

Additionally, you can listen for a transition end event if you have tasks after the animation finishes.

I hope this explanation is helpful!

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

Error: The variable 'xxxxxx' is not recognized

Encountering an issue while trying to pass data via an onclick event and receiving the error message "Uncaught ReferenceError: 'xxxxxx' is not defined" var ShowDetails = function (insuredID) { $.ajax({ type: "GET", ...

"Exploring the world of JavaScript, Ajax, PHP parser errors, and the process of obtaining post data

Having an issue with the AJAX functionality in my game.php file. Despite my efforts to refresh .refre, I keep encountering a "parsererror" message. The jsonString variable is created using JSON.stringify(object). <div class="refre"></div> < ...

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

Perform multiple AJAX requests within a single session

I have a RESTful webservice that generates a hash value based on the current http session. When I access the webservice page in a browser, I consistently see the same value whether I refresh the page or open it in multiple tabs. This behavior is expected a ...

jQuery Mobile experiencing issues with certain links getting stuck on loading

For some reason, when using jQuery Mobile, certain links are getting stuck on the loading spinner and not opening the next page. Here is the code snippet: <div data-role="page"> <div data-role="content"> <ul data-role="listview" ...

more concise jQuery script

Currently, I am a beginner in jquery and still in the learning phase. Although my existing code is functional and achieving the desired outcome, it feels lengthy and inefficient. I am seeking a way to streamline it and make it more dynamic. Specifically, t ...

What is the best way to convert an ajax get request into a post request using jQuery?

I'm interested in transforming a GET request to a POST request: $.ajax({ url: '/items?ids=' + value.join(','), method: 'get', dataType: 'json' }) What changes do I need to make to turn this into a ...

Utilizing AngularJS to bind data with labels and passing it in a form

I'm having trouble binding input data with label tags and using the same ng-model in a post method. Only one thing works at a time, and when I try to pass the label in the post method, it doesn't work. This issue is causing me difficulty in delet ...

Do frameworks typically result in redundant CSS declarations?

Working on my latest Wordpress theme project, I have integrated the Bootstrap framework. One of the styles included in the Bootstrap CSS file is: input, textarea, .uneditable-input { width: 206px; } This style rule is causing issues with how my search ...

Is it possible to access the HTML template prior to Outlook applying any additional classes during rendering?

I recently received an email template created in a different platform via Outlook. I am attempting to recreate this email in the Salesforce Marketing Cloud Platform, but I am encountering numerous unnecessary tables, classes set by Outlook (MsoNormal, Ms ...

Increase and decrease the size of a table row in real-time

I am attempting to create a bootstrap table in which clicking a button in the first column will expand the specific row to show more details. I am aiming for a result similar to what can be found at this link, but without using the DataTables framework. ...

JavaScript utilized to create a fully immersive full-screen webpage

I have been trying to implement a code for creating a full-screen website that works on all browsers. Unfortunately, my current code only seems to be functioning properly on Mozilla browser. When I try to view the site in Chrome and make it full screen, it ...

I am interested in finding a method to preview how my website will appear and function on a mobile device while using a desktop browser

Similar Question: Emulators and Simulators for Testing Mobile Browser Compatibility? I'm interested in seeing how my website appears and functions when accessed on mobile devices like an iPhone, iPad, Android, etc. The challenge is that I do not ...

Error in Fullcalendar Angular/Node.JS http request: Circular structure detected during JSON conversion (at Object.stringify)

Encountering a "TypeError: Converting circular structure to JSON at Object.stringify (native)" error while attempting to update by http call on fullcalendar drop event. Below is the client side code snippet: drop: function() { $scope.schedule. ...

Learn how to easily copy the success result from an Ajax call to your clipboard

Is there a way to use an ajax method to retrieve data from a controller and display it in a JQuery Dialog Box? I want to add a button within the dialog box that allows the user to easily copy the data with a single click, instead of having to manually high ...

Personalize Dropdown Menu, determining when to initiate the hide menu action

When creating a dropdown using ul and li tags, I am faced with the dilemma of determining the ideal time to hide the dropdown menu. The dropdown menu is designed to display values based on user input as they type, updating dynamically. Initially, I had se ...

Similar to the :has() in jQuery, the equivalent in CSS

Consider the code snippet below: <div class="section"> <div class="row">...</div> <div class="row"> <!-- bottom margin here needs to be 0 --> <div class="section"> &l ...

Utilizing jQuery, setInterval, and making asynchronous Ajax requests

I am currently utilizing the craftyslide jquery plugin for creating engaging slideshows on my website. You can find more information about the plugin here. My website employs ajax to load its content, and specifically on the /#home page, there are two slid ...

Issues with the modal in Angular not closing ($uibModal)

angular .module('angProj') .controller('UserCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) { $scope.results = function (content, completed) { var modalInstance = ...

Connect button with entry field

I want to create a connection between an input element and a button, where the button triggers the input and the input remains hidden. Here is a solution that I came across: <a href="javascript:void(0)" id="files" href=""> <button id="uploadDe ...