过渡与绝对定位

Question

请考虑以下示例。Div是球的形状，但它是突然的移动，而不是我想让它对角线过渡到页面的右下角。为什么这种情况没有发生?我错过了什么?

.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>

Answer 1

要使过渡发生，父元素和悬停元素的选择项都需要值。

这里我只是给两个选择器添加了适当的值，并通过轻松地减去它们的高度。

.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>

这些将在大多数现代浏览器中工作。你也可以使用polyfill使其在落后浏览器

下工作。

要发生转换，两个选择器上都需要值。

在您的情况下，父选择器没有bottom或left的任何值，但如果您查看我的代码，父选择器和悬停选择器都有顶部和左侧值。

我们只需要指定值让浏览器知道从哪里开始

Answer 2

你可以尝试将这些设置为悬停状态

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

查看此处的代码依存http://codepen.io/raomarif/pen/RGNpNm?editors=1100

Answer 3

给你一个更复杂的例子，它在鼠标悬停时进行过渡，但无论鼠标在哪里都继续进行+是可逆的

var toggleClass = true;
var totalSeconds = 0;
var transitionTime = 1000; /* In milliseconds */
function mouseOver(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="mouseOver(this)"></div>

这个例子需要Javascript。这里有一些检查，看看过渡是否完成，所以再次悬停圆圈不会逆转过渡等。

JSFiddle摆弄