在位置上使用转换

2021-7-27 15:20:47
收藏：0
阅读：115
评论：1

基本上，当我的盔甲装满时，有元素会弹出，我需要通过位置变化来实现过渡，因为直接弹出很难看！唯一阻止我做这件事的是我对CSS一无所知，但是这是我写的代码

#armor {
    position: relative;
    width: 30px; height: 30px; left: 50%; margin-top: 15px; transform: translateX(-50%);
    background-color: rgb(19, 19, 19);
    border-style: solid; border-width: 12px; border-color: rgb(19, 19, 19); border-radius: 50%; display: flex;
    box-shadow: 0px 0px 15px 0px rgba(103, 255, 194, 0.5);
    animation-name: fadein;
    animation-duration: 0.25s;
    animation-timing-function: ease-in;
}

#armor .bar {
    position: absolute;
    width: 30px; height: 50%; bottom: 0;
    background-image: url("img/armor.png"); background-position: bottom; background-size: cover; background-repeat: no-repeat; opacity: 1.0;
    transition: height 0.25s;
}

#armor .bg {
    position: absolute;
    width: 30px; height: 30px; bottom: 0;
    background-image: url("img/armor.png"); background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0.2;
}

JavaScript:

window.addEventListener("message", function (event) {
   var oxygen = data.oxygen;
   var oxygenStatus = data.oxygenStatus
   document.getElementById('oxygen').getElementsByClassName('bar')[0].style.height = oxygen+"%"
   switch(armorStatus) {
        case true:
            $("#armor").stop().fadeTo(400, 1)
        break;

        case false:
            $("#armor").fadeOut()
        break;
    }

我还使用了jQuery！

我已经尝试在上部和下部使用过渡效果，但是没有起作用。 感谢任何帮助。

预览： 第一张：https://prnt.sc/1gnqmfx 第二张：https://prnt.sc/1gnqsc3

点赞
用户851366
用户851366

我建议您使用 CSS 转换。

这将使您能够更简单地控制转换效果，性能更高，因为您可能只会添加/删除 CSS 类而不是动画元素的位置，并且您将受益于硬件加速。

这是因为转换是浏览器的优化目标，而实际的位置偏移（如 top、left 等）不是，因为这些属性预期是静态的，而您可以告诉浏览器转换属性有望更改。

实际上，您可以使用 will-change CSS 属性 “告诉” 浏览器元素属性将要变化（您还可以使用 transform: translate3d(x,y,z) 代替 translate(x,y) 以欺骗浏览器使用硬件加速）。

CSS 方法的另一个优点是它使您能够将动画定义的噪音保持在 JavaScript 之外，这取决于项目的需求。

这是一个非常简单的例子：

document.body.addEventListener("click", (e) => {
    document.querySelector('.hidden').classList.toggle('shown');
});

:root,body {overflow: hidden}
div {
  position: absolute;
  top: 20px;
  right: 20px;
  background: red;
  color: white;
  padding: 20px;
}
button {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.hidden {
  transform: translate3d(150%, 0, 0); /* <- starts off hidden, out of the viewport */
  will-change: transform;
  transition: .2s cubic-bezier(.4,0,.2,1);
  /*
    for the transition, you can use keywords like ease or linear,
    or define your own timing function as above
  */
}

.shown {
  transform: translate3d(0,0,0); /* <- animating in is actually a case of resetting its translation (away from its origin) to 0 */
}

<div class="hidden">
  I've moved into view with a CSS transform!
</div>

<button id="showDiv">
  Click to toggle the hidden element!
</button>

如果需要，可以使用 JSFiddle：https://jsfiddle.net/wnda/k4r51nfy/6/

2021-07-27 15:41:04

作者:

用户15395399

用户15395399
推荐文章