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！

我已经尝试在 TOP 和 BOTTOM 上使用过渡，但它不起作用。谢谢你的帮助。

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

4

1 回答 1

0

为此，我建议您考虑使用CSS Transforms。

这将使您简化对过渡效果的控制，提高性能，因为您可能只是添加/删除 CSS 类而不是动画元素的位置，并且您将从硬件加速中受益。]

这是因为变换是浏览器的优化目标，而实际的位置偏移（顶部、左侧等）不是，因为这些属性应该是静态的，而您可以告诉浏览器变换属性应该会改变。

实际上，您可以“告诉”浏览器元素属性将随will-changeCSS 属性发生变化（您也可以使用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-27T15:41:04.153 回答