CSS 过渡不起作用 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 (ie 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%);} {opacity: 0; transform: translateX(100%);} to the new state {opacity: 1; transform: translateX(0);} {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>