Moving smoothly while retaining absolute positioning

Question

Moving smoothly while retaining absolute positioning

I have a question about a particular scenario. I have a div element that is styled like a ball and I want it to transition diagonally across the page to the bottom right corner instead of moving suddenly. However, this is not happening as expected. Can you please help me understand what I missed in my code?

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
}
.one:hover {
  background: red;
  bottom: 0px;
  right: 0px;
}

<div class="one"></div>

html css animation css-transitions css-position

Answer 1

Answer №1

To facilitate a smooth transition, it is essential to define values for both the parent and hover element selectors.

In this instance, I have assigned appropriate values to both selectors, allowing for easy calculation of their heights.

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
  top: 0%;
  left: 0%;
}
.one:hover {
  background: red;
  top: calc(100% - 100px);
  left: calc(100% - 100px);
}

<div class="one"></div>

This functionality is compatible with most modern browsers. Additionally, utilizing polyfills can extend its support to older browsers.

Transition requires values on both selectors to function properly.

In your scenario, the parent selector lacks 'bottom' or 'left' values, whereas in my code, both the parent and hover selectors contain 'top' and 'left' values.

The key is to explicitly specify values so that the browser knows where to initiate the transition.

Answer 2

To facilitate a smooth transition, it is essential to define values for both the parent and hover element selectors.

In this instance, I have assigned appropriate values to both selectors, allowing for easy calculation of their heights.

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
  top: 0%;
  left: 0%;
}
.one:hover {
  background: red;
  top: calc(100% - 100px);
  left: calc(100% - 100px);
}

<div class="one"></div>

This functionality is compatible with most modern browsers. Additionally, utilizing polyfills can extend its support to older browsers.

Transition requires values on both selectors to function properly.

In your scenario, the parent selector lacks 'bottom' or 'left' values, whereas in my code, both the parent and hover selectors contain 'top' and 'left' values.

The key is to explicitly specify values so that the browser knows where to initiate the transition.

Answer 3

Answer №2

One possible solution is to define a hover state with the following properties:

  top:100%;
  left:100%;
  margin-top:-100px;
  margin-left:-100px;

To see an example, you can visit the codepen link: http://codepen.io/raomarif/pen/RGNpNm?editors=1100

Answer 4

One possible solution is to define a hover state with the following properties:

  top:100%;
  left:100%;
  margin-top:-100px;
  margin-left:-100px;

To see an example, you can visit the codepen link: http://codepen.io/raomarif/pen/RGNpNm?editors=1100

Answer 5

Answer №3

Here is a more advanced example showcasing a hover transition that continues no matter where the mouse is and can be reversed.

var toggleClass = true;
var totalSeconds = 0;
var transitionTime = 1000; /* In milliseconds */

function onMouseOver(element) {

  if (totalSeconds === 0) {
    var myTimer = setInterval(function() {
      countTime()
    }, 100);
  }

  function countTime() {
    ++totalSeconds;
    console.log(totalSeconds);
    if (totalSeconds >= (transitionTime / 100)) {
      stopTime();
      totalSeconds = 0;
      toggleClass = true;
    } else {

      toggleClass = false;
    }
  }

  if (toggleClass) {
    element.classList.toggle('moved');
  }

  function stopTime() {
    clearInterval(myTimer);
  }

}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.one {
  position: absolute;
  background: green;
  height: 100px;
  width: 100px;
  top: 0;
  left: 0;
  border-radius: 100px;
  transition: all 1000ms ease-in-out;
}
.one.moved {
  top: 100%;
  left: 100%;
  margin-top: -100px;
  margin-left: -100px;
  transition: all 1000ms ease-in-out;
}

<div class="one" onmouseover="onMouseOver(this)"></div>

This demonstration utilizes Javascript with checks to ensure completion of the transition so hovering over the circle again will not reverse the effect.

Explore this JSFiddle for experimentation

Answer 6

Here is a more advanced example showcasing a hover transition that continues no matter where the mouse is and can be reversed.

var toggleClass = true;
var totalSeconds = 0;
var transitionTime = 1000; /* In milliseconds */

function onMouseOver(element) {

  if (totalSeconds === 0) {
    var myTimer = setInterval(function() {
      countTime()
    }, 100);
  }

  function countTime() {
    ++totalSeconds;
    console.log(totalSeconds);
    if (totalSeconds >= (transitionTime / 100)) {
      stopTime();
      totalSeconds = 0;
      toggleClass = true;
    } else {

      toggleClass = false;
    }
  }

  if (toggleClass) {
    element.classList.toggle('moved');
  }

  function stopTime() {
    clearInterval(myTimer);
  }

}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.one {
  position: absolute;
  background: green;
  height: 100px;
  width: 100px;
  top: 0;
  left: 0;
  border-radius: 100px;
  transition: all 1000ms ease-in-out;
}
.one.moved {
  top: 100%;
  left: 100%;
  margin-top: -100px;
  margin-left: -100px;
  transition: all 1000ms ease-in-out;
}

<div class="one" onmouseover="onMouseOver(this)"></div>

This demonstration utilizes Javascript with checks to ensure completion of the transition so hovering over the circle again will not reverse the effect.

Explore this JSFiddle for experimentation

Moving smoothly while retaining absolute positioning

Answer №1

Answer №2

Answer №3

Similar questions

Concealing forms within an Angular 5 application

Bottom of the page: Bootstrap dilemma

Error in WordPress: The table prefix cannot be blank

image in responsive css design

Having trouble with regex failing to capture newlines in sed or perl?

Is there a syntax problem with the jQuery (this).next() statement that is causing it to not

What is the best way to showcase a PDF file on a webpage with multiple thumbnails using JavaScript or jQuery?

Attempting to align navigation bar in the middle of the page

PHP and issues with search functionality

Numerous Radio Buttons

Alter the arrow to dynamically point towards the location of the click source

Creating an HTML page with R Markdown: Placing an image in the upper right corner and adjusting the position of the title

Angular material chips showcase a row of five chips

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

Why do my paths encounter issues when I alter the manner in which I deliver my index.html file?

Problem with word-spacing in Safari versions 6.1 and 7.0 when using text-align:center

Issue with host-context scss rules not appearing in final production version

Count the number of checkboxes in a div

The feature of interpolation within attributes has been eliminated. Please use either v-bind or the colon shorthand in its place

Issue with video not displaying in EJS template on node.js server