CODEWITHSUNDEEP
jqueryhtmlcss
Cristian Alexandru
Cristian Alexandru

Reputation: 90

How to use multiple transition effects for an element

On my site, I want to create an animated item, that will let me know when the maintenance mode is enabled.

enter image description here

The problem is that I use transform: translateX(-50%) for that white box, and when the animate.css comes into place, fading element in, it places the item where it should be without the transform: translateX(-50%) property (like it is in the picture).

The element takes another transform: translate3d(0, -100%, 0) from the fadeInDownBig class.

If I try to remove transform property in the main class, nothing happens, but if I fadeIn it stays in the center.

$('.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>

When element has class fadeInDownBig I want it to be in the center, as well. How can I achieve this?

Upvotes: 0

Views: 205

Answers (1)

Anthony Carbon
Anthony Carbon

Reputation: 618

You fixed this using CSS only. Change your HTML / CSS into

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);
});

Upvotes: 1

Related Questions