html - 如何使用不显示阻止的css3制作向下滑动动画

Question

我只是想知道如何将 display: none 和 display: block 添加到我的动画中并具有缓动效果。

HTML

<div class="floating-vociebox">
  <a>New updates</a>
</div>

任何帮助将不胜感激

DEMO

Answer 1

我尝试从 display:none; 开始。我有三个变体来通过 CSS3 和 jQuery 添加移动和淡入。哪一个更符合您的需求？

$( document ).ready(function(){
	$('.variant-1').fadeIn( 3000 ).addClass('animate-1');
	
  $('.variant-2').css('display','block').delay( 0 ).queue(function(){
    $(this).addClass('animate-2').dequeue();
  });
	
  $('.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>

https://jsfiddle.net/glebkema/gcg7f4pj/