如何为元素使用多个过渡效果

Question

在我的网站上，我想创建一个动画项目，让我知道何时启用维护模式。

问题是我使用transform: translateX(-50%)作为白色框，当 animate.css 到位时，淡入元素，它将项目放在应该没有的地方transform: translateX(-50%)属性（如图所示）。

该元素从transform: translate3d(0, -100%, 0)类中获取另一个fadeInDownBig。

如果我尝试删除主类中的transform属性，则不会发生任何事情，但如果我fadeIn它仍然位于中心。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当元素具有类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);
});