display: noneとdisplay: blockをアニメーションに簡単に追加するにはどうすればいいですか？css3を使ってアニメーションをスライドさせて表示しないようにするには
<div class="floating-vociebox">
<a>New updates</a>
</div>
HTMLは、すべてのヘルプは、私がdisplay:none;からスタートしようとしている
をいただければ幸いです。 CSS3とjQueryで動きやフェードインを追加する3つのバリエーションがあります。あなたが必要とするものはどれですか？
$(document).ready(function(){
\t $('.variant-1').fadeIn(3000).addClass('animate-1');
\t
$('.variant-2').css('display','block').delay(0).queue(function(){
$(this).addClass('animate-2').dequeue();
});
\t
$('.variant-3').addClass('visible').delay(0).queue(function(){
$(this).addClass('animate-2').dequeue();
});
});.floating-vociebox {
background-color: blue;
width: 120px;
height: 30px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
border-radius: 4px;
position: fixed;
top: 100px;
transform: translateY(-90px);
display: none;
}
.variant-1 {
left: 10px;
transition: background-color 0.3s, transform 3s ease-in-out;
}
.variant-2 {
left: 150px;
}
.variant-3 {
left: 290px;
}
.variant-2,
.variant-3 {
opacity: 0;
transition: background-color 0.3s, opacity 3s ease-in, transform 3s ease-in-out;
}
.visible {
display: block;
}
.animate-1 {
transform: translateY(0);
}
.animate-2 {
opacity: 1;
transform: translateY(0);
}
.floating-vociebox:hover {
background-color: darkblue;
}
.floating-vociebox a {
cursor: pointer;
display: block;
text-align: center;
line-height: 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
}<div class="floating-vociebox variant-1">
<a>Variant 1</a>
</div>
<div class="floating-vociebox variant-2">
<a>Variant 2</a>
</div>
<div class="floating-vociebox variant-3">
<a>Variant 3</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
効果を説明し、私たちあなたを助けることができます。 – Blazed
@MattewDeveloperボイスボックスが上からスライドするのが見えますが、ボイスボックスと同じ効果が必要です。最初は – Benjamin
の 'display'は再生できません。フェードイン/アウトしたい場合は、 'opacity'を使うことができます。 – Aloso