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>

这些适用于大多数现代浏览器。您还可以使用pollyfill使其适用于后向浏览器

要实现转换，您需要两个选择器上的值。

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

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

Answer 2

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

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

在此检查代码集http://codepen.io/raomarif/pen/RGNpNm?editors=1100

Answer 3

只是为了给你一个更复杂的例子，它可以在悬停时进行转换，但无论鼠标在哪里都是可逆的，它都会继续。

＆＃13;

 @Override
public View getView( int position, View convertView, ViewGroup parent) {
    ImageView imageView = new ImageView(mContext);
    imageView.setImageResource(mThumbIds.get((mThumbIds.size()-1)-position));

    //the part where only one works
    imageView.setBackgroundResource(R.drawable.fab_icon_bg);
    imageView.setBackgroundColor(Color.GREEN);

    imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    setAnimation(imageView,position);
    imageView.setLayoutParams(new GridView.LayoutParams(180, 180));

    return imageView;
}

＆＃13;

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);
  }

}

＆＃13;

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;
}

＆＃13;

此示例需要Javascript。有一些检查以确定过渡是否完成，因此再次盘旋圈子不会反转过渡等。

JSFiddle to play around with

绝对定位过渡

3 个答案: