javascript - 关于使用animate.css库添加动画的问题
ringa_lee
ringa_lee 2017-04-11 11:59:45
0
1
779

原来确定按钮是如图所示布局且为隐藏状态,这里为了截图就让第一个显示一下位置。
确定按钮css:

.m-blanktest .answer .assure { position: absolute; top: 0; left: 50%; display: none; width: 120px; height: 150px; transform: translate(-50%,-100%); background: url(../img/btn_quedingjuxing.png) no-repeat center center; background-size: cover; }

然后我引入aimate.css库,监听点击事件为其添加动画类名,然而动画出现了位置偏差。

javascript:

$(target).find(".assure").addClass('animated bounceIn').show();

请问使用animate.css怎么让确定按钮在我原来布局的位置弹出?

ringa_lee
ringa_lee

ringa_lee

reply all (1)
伊谢尔伦

你的transform属性被bounceIn的keyframes里的transform覆盖了,建议你这里使用left、top之类的属性,或者自定义这个CSS库,

@keyframes bounceIn { ... 0% { opacity: 0; transform: scale3d(.3, .3, .3) ; } ... to { opacity: 1; transform: scale3d(1, 1, 1); } }
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!