gpt4 book ai didi

javascript - TranslateX 显示为动画

转载 作者:太空宇宙 更新时间:2023-11-03 20:33:36 27 4
gpt4 key购买 nike

我正在尝试使用更多的 css 和更少的 Javascript 来制作动画。我遇到了动画三个不同盒子的问题。我通过添加 fadeShow 类使不透明度为 1,使框以不透明度淡入淡出。但是,我希望框看起来好像是从页面左侧到页面左侧的动画对。

这是一个 fiddle ,展示了它的实际效果:

Click here to see

.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}

我正在尝试让方框在 150 像素以上进行动画处理,或者如果有更好的方法可以将方框置于其永久状态。我的意思是,如果框应该位于 left: 25%;left: 45%;left: 65%;,然后我希望框在其左侧 150px,然后过渡到位。

最佳答案

首先,要让框从左侧滑过,您应该对 .info-box 类应用负变换:

transform:translatex(-150px);

然后在.fadeShow类中重新设置:

transform:initial;

其次,您将 .info-box 类的 display 属性设置为 inline,您需要将其更改为转换不能应用于内联元素。

最后,出于性能目的,最好明确说明要将转换应用于哪些属性:

transition:opacity 1s,transform 1s;

或者:

transition-duration:1s;
transition-property:opacity,transform;

关于javascript - TranslateX 显示为动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37189844/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com