如何解决如何为具有不同位置的元素设置动画以移向相同的位置/元素?
我正在为CV创建一个鞋店网站。我在主页上呈现了多个项目,并选择了添加到购物车。当用户单击“添加到购物车”时,我想对元素的图片进行动画处理,使其朝向标题中的购物车。我可以使用元素的相对位置开始动画,但是我不知道如何获取具有不同相对位置的元素最终到达同一位置?现在,我可以让它们起身走,但我希望它们能准确地到达CART。 (例如,在“拙劣的捆绑销售商品”页面中)。 我看到人们通过使用jquery的动画来提供解决方案,但是我的应用程序是基于React的,因此,我尝试尽可能避免使用jquery。
@keyframes item-to-card-animation{
0%{
position: relative;
opacity:100%;
top:0px;
left:0px;
transform: scale(1);
}
99%{
top:-1000px;
left:100px;
transform: scale(0.2);
z-index:100;
}
100%{
opacity:0%;
}
}
解决方法
好的,所以如果有人偶然发现这一点。我在javascript中克隆了一个元素,然后从javascript放置内联位置(因为您可以从那里访问它),然后使用绝对定位对其进行动画处理。
const bodyRect = document.body.getBoundingClientRect();
const elemRect = document.getElementById(this.state.itemToCart._id).getBoundingClientRect();
const top = elemRect.top - bodyRect.top;
const left = elemRect.left - bodyRect.left;
let cloneItem = document.getElementById(this.state.itemToCart._id).cloneNode(true);
cloneItem.style.position = "absolute";
cloneItem.style.top = top + "px";
cloneItem.style.left = left + "px";
cloneItem.classList.add('item-to-card-animation');
document.querySelector('#root').appendChild(cloneItem);
setTimeout(() => {
cloneItem.remove();
},1000)
@keyframes item-to-card-animation{
0%{
opacity:100%;
transform: scale(1);
}
99%{
top:-150px;
left:1150px;
transform: scale(0.2);
z-index:100;
}
100%{
opacity:0%;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。