绝对值到固定值的Css转换

3phpmpom 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(160)

我有一个孩子在一个家长，我想动画从它的开始位置到页面底部到固定位置的孩子。显然动画是不是"充分"，因为位置从绝对到固定的变化时，动画开始，我理解打破动画。这是可能的，以某种方式实现？我不介意一些更多的html如果必要的。

var a = document.querySelector('.mini')

  document.body.addEventListener('click', function() {

    a.classList.add('hov')

  })

.parent {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  height: 300px;
  width: 300px;

}

.mini {
  position: absolute;
  bottom: 200px;
  right: 0;
  background: orange;
  height: 100px;
  transition: all 0.5s;
  width: 300px;

}

.hov {
  position: fixed;
  bottom: 0;
  right: 0;

}

<div class="parent">
  <div class="mini">

    <div class="b">Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.</div>

  </div>
</div>

css

来源：https://stackoverflow.com/questions/74855998/css-transition-absolute-to-fixed

2条答案

按热度按时间

2lpgd9681#

您可以更改动画中的bottom和right属性，然后使用setTimeout添加另一个类，以便在动画时间结束后将位置更改为fixed。
此外，过渡将在. hov上而不是. mini上

var a = document.querySelector('.mini')

  document.body.addEventListener('click', function() {

    a.classList.add('hov')

    setTimeout(() => {
      a.classList.add('change-position')
    }, 500)
  })

.parent {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  height: 300px;
  width: 300px;

}

.mini {
  position: absolute;
  bottom: 200px;
  right: 0;
  background: orange;
  height: 100px;
  width: 300px;

}

.hov {
  transition: all 0.5s;
  bottom: 0;
  right: 0;
}

.change-position {
  position: fixed;
}

赞(0）回复(0）举报 2022-12-20

omtl5h9j2#

我使用的一种方法是在元素仍然具有绝对位置时对其进行动画处理，然后在动画处理完成后立即为其添加一个固定位置值。
为了达到这个目的，元素首先被附加到主体，这样它就可以在文档的边界内移动，基本上就是整个屏幕。如果元素要返回到它的原始位置，takeMeBack()函数会完成整个工作，在这个例子中，每一次连续的点击都会执行动画或取消动画。

var a = document.querySelector('.mini')
var p = document.querySelector('.parent')

let counter = 1;
document.body.addEventListener('click', function() {

    /* Obsolete Section -- Use in case tweaking position is needed
    when element is not at the edge of the page*/
    let pos_childTop = a.offsetTop;
    let pos_childLeft = a.offsetLeft;
    let pos_parentTop = p.offsetTop;
    let pos_parentLeft = p.offsetLeft;
    
    let absLeft = pos_childLeft + pos_parentLeft;
    let absTop = pos_childTop + pos_parentTop;

    // console.log(absLeft)
    // console.log(absTop)
    /* End of tweaking section */
    
    if(counter%2 != 0){
        // make the body its parent
        document.body.appendChild(a);
        a.style.setProperty('--right-location', 'calc(100% - 300px)');
        a.style.setProperty('--bottom-location', 'calc(100% - 100px)');

        a.classList.add('hov');
        setTimeout(() => {
            a.style.position = "fixed";
        }, 1001)
        // give fixed position after placement in document
    }
    else {
        // Take element back to its original position
        // And make the '.parent' div its parent again
        takeMeBack();
    }

    counter++;
})

function takeMeBack(){
    p.appendChild(a);
    a.classList.remove('hov')
    a.style.position = "absolute";
    // revert element's position
}

:root {
    --right-location: 0;
    --bottom-location: 0;
}

body {
    padding: 0;
    margin: 0;
}

.parent {
    position: absolute;
    left: 0;
    top: 0;
    background: #ccc;
    height: 300px;
    width: 300px;
}

.mini {
    position: absolute;
    bottom: 200px;
    right: 0;
    background: orange;
    height: 100px;
    width: 300px;
}

.hov {
    animation: shift 1s forwards;
}

@keyframes shift {
    from { right: var(--right-location); bottom: var(--bottom-location); }
    to { right: 0px; bottom: 0px; }
}

#revert {
    position: fixed;
    top: 0;
    right: 0;
}

<body>
    <div class="parent">
        <div class="mini">
        
            <div class="b">Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.</div>
        
        </div>
    </div>
</body>

赞(0）回复(0）举报 2022-12-20

我来回答

绝对值到固定值的Css转换

2条答案

相关问题

热门标签

最新问答