碰到一个问题,在vue项目中引入animate.css来实现过渡动画,然而出现了一些怪异的问题。
发生的问题如图所示
该图出现的问题为节点的位置和尺寸都是按比例为1:1时的状态,而非当前尺寸和位置
该图出现的问题真不知道怎么描述,同一份代码在不同电脑的谷歌浏览器竟然表现不一致,一台显示正常,另一台出现的问题如图,位置发生了偏移。确认过同一份代码,浏览器都是最新版本的谷歌浏览器
animate.css中起作用的样式为
.rubberBand {
animation-name: rubberBand;
}
@keyframes rubberBand {
from { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, 0.75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }
50% { transform: scale3d(1.15, 0.85, 1); }
65% { transform: scale3d(0.95, 1.05, 1); }
75% { transform: scale3d(1.05, 0.95, 1); }
to { transform: scale3d(1, 1, 1); }
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
项目关键代码为
{{node.label}}
如果依旧采用该方案实现动画,需要怎么调整才能使其正常表现