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>

ここでは、コードと間違って何fiddleているのですか？

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>

私はいくつか変更されました：クラスがそのあなたの要素の異なる状態を表しているので、それはCSSトランジションのためのクラスを使うようにするとよいでしょうので、私はクラスにnotification-alertを変更

1. を〜へと移行します。
2. さらに、この要素が表示されているときの状態を表す新しいクラスnotification-alert--shownを追加しました。
3. ボタンをクリックしてトランジションを開始すると、jqueryを使用してクラスnotification-alert--shownを追加しました。

   CSSトランジションの仕事を（良い習慣として）に、別のCSSクラスからフレームを追加することによって：

は、今、私たちは、CSSの遷移がどのように働くかを説明する必要があります。移行を起こすには、少なくとも2つのクラスが必要です。この場合、それはnotification-alertとnotification-alert--shownです。これらのクラスは、プロパティーtransformおよびopacityと異なるだけです（つまり、競合するプロパティーを持っています）。

これらのプロパティは2つのクラスで異なるため、変更するときに2つのクラスを切り替える（つまり、フレームを追加する）ようにCSSに指示できます。私はクラスnotification-alert--shownを追加するとき

だから、私は新しい状態に状態{opacity: 0; transform: translateX(100%);}から{opacity: 1; transform: translateX(0);}

を移行するためにフレームを追加するには、ブラウザを言っていると私は、私はすべての異なるを移行したいブラウザを教えてプロパティにallを追加してtransition: all ...に追加します。

---

また、コメントでいくつかの質問を育てた：これは偉大な作業

。しかし、それは単にフェード効果を示しています。しかし、なぜこの種のアニメーションは機能していないのですか？遷移タイミング関数：立方ベジェ（0.175、0.885、0.32、1。275）。

これは、あなたがtransition-timing-functionプロパティについて少し誤解していると思うようになります。 transition-timing-functionは、要素がどのように正確に移動するかとは関係ありません。あなたが求めた遷移がどのように時間とともに適用されるかにのみ関係します。遷移タイミングプロパティhereについて詳しく読むことができます。

---

そして、あなたはまた、1つのより多くの事を尋ね：

は今偉大なルックス！数秒後にどのようにフェードアウトできますか？

これを行うには、window.setTimeoutを使用して、一定時間後にクラスを削除するコードを実行します。

デモの例を更新しました。

---

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

Answer 2

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

これを試してみてください、あなたのアラートIDに#alertを変更。

Answer 3

このようなアップデート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 4

あなたは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 5

することができますトランジション表示プロパティ、i tは可視かどうか、中間ステップはありません。しかし、あなたは簡単にアニメーション不透明で必要な視覚的効果を得ることができます：あなたは、この設定できるため、次の描画サイクルで実行されるアニメーションフェーズのスケジュールを設定する必要があること

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 6

遷移はアニメーションによく似ています。

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オーバーライドをチェックして、behavior: ***.htc cssハックをチェックしてください。 あなたのトランジションをオーバーライドするかもしれません！

あなたはこれをチェックする必要がありますhttps://www.w3schools.com/css/css3_transitions.aspは

Answer 7

私の知る限りでは、CSSの遷移がdisplay: none CSSプロパティには影響しません。 JSとも

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

を、次のように：

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

 
    button.onclick = function() { 
 
     var alertBlock = document.getElementById('notification-alert') 
 
     \t 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>