The Transition Division Is Malfunctioning

Question

The Transition Division Is Malfunctioning

I've encountered an issue where I am trying to move a div by adjusting its left property, but no transition is taking place. Regardless of the changes I make to my code, the result remains the same. Below is the current state of the code. Can anyone identify what I might be overlooking?

HTML:

<div ng-style="pos" class="box"></div>

CSS:

.box {
    position:absolute;
    top:250px;
    left:100px;
    background-color:tan;
    height:50px;
    width:50px;
    transition: top 1800ms linear, left 1800ms linear;
}

JS:

function moveController($scope) {
    $scope.pos = {
        top: 250,
        left: 100
    }
    $scope.pos.left = 650;
}

Although the box appears correctly on the screen with the CSS formatting, it fails to transition over the specified 1800ms period. Can someone shed some light on why this might be happening?

javascript html css angularjs

Answer 1

Answer №1

It is advisable to incorporate a timeout or delay before modifying the styles:

function updatePosition($scope, $timeout) {
    $scope.coordinates = {
        top: 240,
        left: 110
    }

    $timeout(function(){
         $scope.coordinates.left = 655;
    }, 1000)

}

Considering that the DOM is rendered after the controller initialization, without any delay the initial position of the DIV would be top: 250, left: 650.

Answer 2

It is advisable to incorporate a timeout or delay before modifying the styles:

function updatePosition($scope, $timeout) {
    $scope.coordinates = {
        top: 240,
        left: 110
    }

    $timeout(function(){
         $scope.coordinates.left = 655;
    }, 1000)

}

Considering that the DOM is rendered after the controller initialization, without any delay the initial position of the DIV would be top: 250, left: 650.

Answer 3

Answer №2

It seems like the issue lies in assigning both values simultaneously.

$timeout(function () {
   $scope.pos.left = 650;
}, 10);

By following this method, you can establish an initial value and modify it as needed!

Answer 4

It seems like the issue lies in assigning both values simultaneously.

$timeout(function () {
   $scope.pos.left = 650;
}, 10);

By following this method, you can establish an initial value and modify it as needed!

Answer 5

Answer №3

One way to ensure your code executes only after the DOM has loaded is by using

angular.element(document).ready()

within your controller.

To implement this in your controller, you can do the following:

angular.element(document).ready(function(){
    // Your action goes here
});

Answer 6

One way to ensure your code executes only after the DOM has loaded is by using

angular.element(document).ready()

within your controller.

To implement this in your controller, you can do the following:

angular.element(document).ready(function(){
    // Your action goes here
});

The Transition Division Is Malfunctioning

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to pass an array through router navigate function?

What is the best way to access an AngularJs directive's controller function from a specific attribute within the directive element?

Create a path on the Google Map that follows the designated route

Express app issues error: JSON response not returned properly - Uncaught SyntaxError: Unexpected end of data

One particular Django template is failing to load the CSS, while the rest of the templates are

The session becomes obsolete when redirecting back to the previous page

Having Trouble with Bootstrap 4: "Encountering Uncaught Error: Tooltip Transition in Progress"

Encountered a snag while executing Powershell with Selenium: Error message - unable to interact with

Tips on retrieving specific information from PHP through jQuery AJAX

A div element with the class name "draggable" is

What is the best way to increase the size of this text when an image is hovered over?

Retrieve data from a JSON object and assign it to a variable in JavaScript

Verify the pop-up browser window that appears when the page begins to reload using Cucumber

Exploring the Relative Positioning of Two div Elements

The document ready event does not fire upon page load, but can be triggered using the Developer Tools Console

Error encountered while using the Fetch API: SyntaxError - the JSON data contains an unexpected character at the beginning

Struggling to display Firestore data in a React component - useRef() does not trigger re-render and useState() throws an error

Enhancing AngularJs code effectiveness through the use of MVC framework

Text will not be displayed when it is written on images

Attempting to implement usedispatch hook in combination with userefs, however, encountering issues with functionality