animate.css遇到transform


引用动画插件animate.css时候,使用vue的情况下,在body下面有大#app包裹并设置了translate3d。footer部位设置了position属性,效果:position失效,按钮回到中间,并不在底部了。

解决途径:度娘
原理:父级元素如果有transform属性,会导致子元素的fixed失效,暂时没有找到直接的解决方法。
间接解决方法:animate.css遇到transform: translate3d,改变布局,既然position是定位底部的,可以从父级中拿出来。

<!-- 外面包裹content的div,是为了将footer和content区别开,动画的animate.css作用在content上,因为footer是absolute性质,animate下面只要包裹了该元素,就失效,所以拿出来了 -->


Carpe Diem and Do what I like