星空网 > 软件开发 > 网页设计

css动画结束后 js无法修改translated值 .

由于项目的需要,俺要做一些页面的转场动画。

即将是移动端,肯定是首先css动画了。

结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性translate3d的值;

起初,以为是项目过于复杂,代码之前造成了相互影响,可事实并非如何

后来,我便写了个简单demo来测试;

css:

@keyframes slideInRight {  0% {    visibility: visible;    -webkit-transform: translate3d(100%, 0, 0);    transform: translate3d(100%, 0, 0);  }  100% {    visibility: visible;    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);  }}.slideInRight {  -webkit-animation-name: slideInRight;  animation-name: slideInRight;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;animation-duration: .35s;}

 

 

在css动画结束后,js手动设置translate3d()竟然无效,真是很头疼,即便是在谷歌浏览器也无法设置其值。

无奈,只能在动画结束后再先移除动画样式,但即使是这样,在部分浏览器中也会出现无法更改的情况

css动画结束后  js无法修改translated值 .css动画结束后  js无法修改translated值 .
1 $('.page').on('webkitAnimationEnd', function (e) {//webkit动画结束隐藏2     $(this).removeClass('animated slideInRight').trans3d(0);3   }, false);

View Code

真是头疼。。

 

--------------------都说海水深,怎抵相思半----------------------------




原标题:css动画结束后 js无法修改translated值 .

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊账号防关联终极解决方案:https://www.kjdsnews.com/a/1546745.html
海外营销节点盘点:看头部跨境卖家如何利用热点收割消费者:https://www.kjdsnews.com/a/1546746.html
全面解析香港、美国、新加坡等国家的商标注册流程:https://www.kjdsnews.com/a/1547691.html
美国正在上演一场由中国品牌引发的跨境之战,快来看看!:https://www.kjdsnews.com/a/1547692.html
抖音10大热门变现项目:https://www.kjdsnews.com/a/1548691.html
迪卡侬怎么在小红书上做爆款?:https://www.kjdsnews.com/a/1548692.html
怎样做出一个有利可图的SaaS产品?:https://www.kjdsnews.com/a/1836639.html
【再放信号】美国Etsy即将放开中国卖家入驻,官方邮件你收到了吗?:https://www.kjdsnews.com/a/1836640.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流