jquery - 如何为一个元素使用多种过渡效果

Question

在我的网站上，我想创建一个动画元素，它会在维护模式启用时通知我。

问题是我对那个白框使用了 transform: translateX(-50%)，当 animate.css 到位时，淡入淡出的元素，它将元素放置在没有 transform: translateX(-50%) 属性的地方(就像它在图片中一样)。

该元素采用来自 fadeInDownBig 类的另一个 transform: translate3d(0, -100%, 0)。

如果我尝试删除主类中的 transform 属性，什么也不会发生，但如果我fadeIn 它会留在中间。

$('.animate').click(function() {
  $('.item').addClass('fadeInDownBig').css('display', 'inline-block');
});

$('.fade').click(function() {
  $('.item').fadeIn(2000);
});

.item {
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background: cornflowerblue;
  color: white;
  border-radius: 5px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
  @charset "UTF-8";
  /*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2014 Daniel Eden
*/
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
 
  
  @-webkit-keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  .fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
  }
</style>

<div class="item animated">
  This is my content
</div>

<br>
<br>
<br>
<br>
<br>

<button class="fade">Fade button</button>|
<button class="animate">Animate button</button>

当元素具有类 fadeInDownBig 时，我也希望它位于中心。我怎样才能做到这一点？

Answer 1

您仅使用 CSS 修复了此问题。将您的 HTML/CSS 更改为

HTML

<div class="wrap">
    <div class="item animated">This is my content</div>
</div>

CSS

.wrap {
    text-align: center;
}
.item {
    display: none;
    padding: 10px;
    background: cornflowerblue;
    color: white;
    border-radius: 5px;
    width: 300px;
    margin: 0 auto;
}
.fadeInDownBig {
    display: inline-block;
}
@charset"UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2014 Daniel Eden
*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

JS

$('.animate').click(function () {
    $('.item').addClass('fadeInDownBig');
});

$('.fade').click(function () {
    $('.item').fadeIn(2000);
});