简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 关于使用animate.css库添加动画的问题
ringa_lee
ringa_lee 2017-04-11 11:59:45
0
1
807

原来确定按钮是如图所示布局且为隐藏状态，这里为了截图就让第一个显示一下位置。
确定按钮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

répondre à tous(1)
伊谢尔伦
伊谢尔伦2017-04-11 12:01:45 1 plancher

你的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);
  }
}
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！