CSS 過渡不起作用 onclick

Question

我只想在我的頁面左下角點擊時顯示通知警報。 通知框顯示正確，但轉換不起作用。 我試過這種方式。

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

這是小提琴代碼有什么問題？

Answer 1

這是工作結果。

 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>

我改變了幾件事：

1. 我將notification-alert更改為一個類，因為使用類進行 CSS 轉換是一種很好的做法，因為這些類表示元素將要轉換的不同狀態。
2. 另外，我添加了一個新的類notification-alert--shown ，它表示該元素在顯示時的狀態。
3. 我使用 jquery 添加類notification-alert--shown當單擊按鈕啟動轉換時顯示。

現在我們需要解釋 CSS 過渡是如何工作的：

CSS 過渡通過在不同 CSS 類之間添加幀來工作（作為一種很好的做法）。 為了實現轉換，您至少需要兩個類。 在這種情況下，就是notification-alert和notification-alert--shown 。 這些類僅與屬性transform和opacity不同（即具有沖突的屬性）。

由於這兩個類之間的這些屬性不同，我可以告訴 CSS 在兩個類發生變化時進行轉換（即，在它們之間添加幀）。

因此，當我添加類notification-alert--shown ，我告訴瀏覽器添加幀以從狀態{opacity: 0; transform: translateX(100%);} {opacity: 0; transform: translateX(100%);}到新狀態{opacity: 1; transform: translateX(0);} {opacity: 1; transform: translateX(0);}

我告訴瀏覽器我想通過將all添加到transition: all ...來轉換所有不同的屬性。

---

您還在評論中提出了一些問題：

這很好用。 但它只顯示淡入淡出效果。 但是為什么這種動畫不起作用？transition-timing-function：cubic-bezier(0.175, 0.885, 0.32, 1.275);

這讓我覺得你對transition-timing-function屬性有一點誤解。 transition-timing-function與元素如何精確移動無關——它只關心你要求的過渡是如何隨着時間的推移而應用的。 您可以在此處閱讀有關轉換時間屬性的更多信息。

---

你還要求一件事：

現在看起來很棒！ 如何在幾秒鍾后淡出？

為此，您可以使用window.setTimeout運行一些代碼以在一定時間后刪除該類。

我已經更新了示例以進行演示。

---

這是一個關於 CSS-tricks 上的 CSS 轉換的好教程。

Answer 2

你不能轉換顯示屬性，它要么可見，要么不可見，沒有中間步驟。 但是，您可以使用動畫不透明度輕松實現所需的視覺效果：

 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>

請注意，您需要安排動畫階段在下一個渲染周期中運行，為此您可以使用setTimeout設置延遲。

最后，為什么同時使用display: none和opacity: 0 ？ 好吧，我們不希望用戶意外單擊“不可見”警報，如果您只使用opacity就會發生這種情況。 因此，我們還需要真正隱藏帶有display: none警報（或其他方式，例如負位置）。

Answer 3

過渡更像是一個動畫。

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 */
}

所以你需要用一個動作來調用那個動畫。

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

還要檢查瀏覽器是否支持，如果您嘗試做的事情仍然有問題！ 檢查樣式表中的 css-overrides 並檢查behavior: ***.htc css hacks .. 可能有一些東西覆蓋了您的過渡！

你應該看看這個： https : //www.w3schools.com/css/css3_transitions.asp

Answer 4

據我所知，CSS 過渡不會影響display: none CSS 屬性。 為此，您需要按如下方式更改代碼：

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

試試這個，將#alert更改為您的警報 ID。

Answer 6

像這樣更新 CSS：

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

}

和這樣的 HTML：

<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

您可以通過 jQuery 實現：

嘗試這個：

$("#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

也用JS，像這樣：

 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>