CSS transition not working onclick

Question

I just want to show a notification alert on click in bottom left in my page. The notification box appears correctly but transition isn't working. I tried this way.

#notification-alert {
  display: none;
  font-family: 'Montserrat-regular';
  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 500ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' onclick='$("#notification-alert").show()'>



<div id="notification-alert">
  <span>Great job, you're under way!</span>
</div>

Here is the fiddle What's wrong with the code?

Answer 1

Here's the working result.

var notificationTimer = 2000; // miliseconds to hide the notification alert

$('.submit-button').on('click', function () {
  $('.notification-alert').addClass('notification-alert--shown');
  setTimeout(function () {
    $('.notification-alert').removeClass('notification-alert--shown');
  }, notificationTimer)
});

.notification-alert {
  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  transform: translateX(100%);
  transition: all 500ms;
  opacity: 0;
  z-index: -1;
}

.notification-alert--shown {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="submit-button">show notification</button>

<div class="notification-alert">
  <span>Great job, you're under way!</span>
</div>

I changed a few things:

1. I changed notification-alert to a class because it's good practice to use classes for CSS transitions because the classes represent different states that your element will transition to and from.
2. Additional, I added a new class notification-alert--shown which represents the state of this element when it is shown.
3. I used jquery to add the class notification-alert--shown when the button is clicked to initiate the transition.

Now we need to explain how CSS transitions work:

CSS transitions work by adding frames to and from different CSS classes (as a good practice). In order to make a transition happen, you need at least two classes. In this case, that's notification-alert and notification-alert--shown. These classes only differ (i.e. have conflicting properties) with the properties transform and opacity.

Since those properties are different between the two classes, I can tell CSS to transition (that is, add frames between) the two classes when they change.

So when I add the class notification-alert--shown, I am telling the browser to add frames to transition from the state {opacity: 0; transform: translateX(100%);} to the new state {opacity: 1; transform: translateX(0);}

And I tell the browser that I want to transition all the different property by adding all to transition: all ....

---

You also brought up a few questions in the comments:

This working great. But it's only show fade effect. But why this kind of animation isn't working?transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

And this leads me to think you have a slight misunderstanding about the transition-timing-function property. The transition-timing-function is not associated with how the element move exactly--it is only concerned with how the transition you asked for is applied over time. You can read more about transition timing property here.

---

And you also asked for one more thing:

Looks great now! How can I fade out after few seconds?

To do that, you can use window.setTimeout to run some code to remove the class after a certain amount of time.

I've updated the example to demonstrate.

---

Here is a good tutorial on CSS transitions on CSS-tricks.

Answer 2

You can't transition display property, it's either visible or not, no intermediate steps. However, you can easily achieve needed visual effect with animated opacity:

function showAlert () {
  var $alert = $("#notification-alert").show()
  setTimeout(function() {
    $alert.addClass("show")
  })
}

#notification-alert {
  display: none;
  opacity: 0; /* <---- additional opacity */
  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 500ms;
}
#notification-alert.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" onclick="showAlert()">

<div id="notification-alert">
  <span>Great job, you're under way!</span>
</div>

Note, that you need to schedule animation phase to be run in the next rendering cycle, for this you can set a delay with setTimeout.

Finally, why use both display: none and opacity: 0? Well, we don't want user to click "invisible" alert by accident, which would happen if you only used opacity. So we also need to really hide alert with display: none (or some other way, like negative position).

Answer 3

Transition is more like an animation.

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

So you need to invoke that animation with an action.

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

Also check for browser support and if you still have some problem with whatever you're trying to do! Check css-overrides in your stylesheet and also check out for behavior: ***.htc css hacks.. there may be something overriding your transition!

You should check this out: https://www.w3schools.com/css/css3_transitions.asp

Answer 4

As far as I know, CSS transitions don't effect the display: none CSS property. For this, you need to change your code as follows:

#notification-alert {
display: none;
font-family: 'Montserrat-regular';
color: white;
bottom: 20px;
right: 20px;
position: fixed;
background-color: #f4b251;
border-bottom: 4px solid #E89F3C;
color: #fff;
padding: 20px;
border-radius: 14px;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 500ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' class="showme">
<div id="notification-alert">
  <span>Great job, you're under way!</span>
</div>
<script>
  $(".showme").on("click", function(){
  $("#notification-alert").fadeIn();
});
</script>

Answer 5

<script type="text/javascript">
        $('#alert').fadeIn("slow");setTimeout(function(){$("#alert").fadeOut(2000);},3000);
</script>

try this, change #alert to your alert id.

Answer 6

Update CSS like this:

#notification-alert{

  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;

}

And HTML like this:

<input type='submit' onclick='$("#notification-alert").fadeIn(1000)'>

<div id="notification-alert" style="display:none;">
  <span>Great job, you're under way!</span>
</div>

Answer 7

You can achieve via jQuery:

Try this:

$("#notification-alert").css({"opacity" : "0"}); //put the opacity to 0
   $("#submit_btn").click(function(e){ //Create an identifier for the submit button
   $("#notification-alert").fadeTo(500, 1);
});

Answer 8

Also with JS, like this:

var button = document.getElementById('btn');

    button.onclick = function() {
        var alertBlock = document.getElementById('notification-alert')
       alertBlock.classList.add('notification-alert-visible');
    };

#notification-alert {
  color: white;
  bottom: 20px;
  right: 20px;
  position: fixed;
  background-color: #f4b251;
  border-bottom: 4px solid #E89F3C;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
}

.notification-alert-hidden {
  transition: all .5s ease-in-out;
  opacity: 0;
}

.notification-alert-visible {
  opacity: 1;
}

<input type='submit' id='btn'>

<div id="notification-alert" class="notification-alert-hidden">
  <span>Great job, you're under way!</span>
</div>