Пожалуйста, рассмотрите следующий пример. 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>
2
ItsME 5 Сен 2016 в 09:41

3 ответа

Лучший ответ

Чтобы переход произошел, вам нужны значения как для родительского селектора, так и для селектора элемента при наведении курсора.

Здесь я просто добавил правильные значения к обоим селекторам, легко вычтя их высоту.

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

Они будут работать с большинством современных браузеров. Также вы можете использовать полифилл, чтобы он работал с отсталыми браузерами.

Чтобы переход произошел, вам нужны значения в обоих селекторах.

Здесь, в вашем случае, родительский селектор не имеет значений bottom или left, но если вы посмотрите на мой код, оба родительского селектора и селектора при наведении курсора имеют верхнее и левое значение.

Нам просто нужно указать значение, чтобы браузер знал, с чего начать

2
chirag 5 Сен 2016 в 12:35

Просто чтобы дать вам более сложный пример, который выполняет переход при наведении курсора, но продолжает его независимо от того, где находится мышь + обратимо.

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, с которым можно поиграть

-1
thepio 5 Сен 2016 в 07:32

Вы можете попробовать, передав их в состояние зависания

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

Проверьте код здесь http://codepen.io/raomarif/pen/RGNpNm?editors=1100

1
rmarif 5 Сен 2016 в 07:10