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

Should a Service Worker be automatically installed on each page reload, or only when a user navigates to a new page?

How can I design a search box similar to the one on the android.com website?

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

Discover the seamless process of dynamically adjusting metadata to reflect current state values within the Next.js app directory

Designing a file upload progress bar with the help of jquery and ajax

Tips for modifying the appearance of an anchor <a> element within a table cell with jQuery

Expansive picture feature within jQuery Mobile

Navigating through a collection of objects

Leveraging functions in a Node.js module

The Highchart column chart is triggering the drilldown event multiple times

What steps should I take to address a problem involving a callback function?

What methods can we use to test angular controller functions that are not within the scope?

Delete items from several arrays on a click event in React

Regex tips: Matching multiple words in regex

Can a placeholder dropzone be created at the bottom of Vue Draggable lists?

Tips on running methods consecutively within ngOnInit in Angular

Display a pop-up window when hovering over a table cell using HTML and JavaScript

Requesting the user to repeatedly input their birth year until it is less than the current year

Exploring ways to specifically select predefined strings by defining a regex parameter in angular-ui-router

Checking for the presence of text within a span tag - a simple guide