获取CSS动画流畅

时间：2016-08-23 15:12:39

标签： jquery html css

如果你碰到下面的纸板，我已经实现了一个镜像三角形并切换颜色的动画，但我很难让它变得流畅。它有点卡住了，你在动画之间得到了丑陋的白线。有谁知道如何改进这个代码或者有另一种（更好的）方法来完成我的动画。

$('.contact .topbar .paperplane').click(function(){
  if($('.contact').hasClass('active')){
    $('.contact').removeClass('active');
  }else{
    $('.contact').addClass('active');
  }
});
.contact{
	position:relative;
	background:#445;
}
.contact .topbar{
	height:200px;
	
	background:linear-gradient(to bottom, #fff 50%, #445 50%);
	background-size: 100% 200%;
    background-position:top right;
	transition:1s;
}
.contact .topbar .paperplane{
	width:75px;
	height:75px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	cursor:pointer;
	
	animation: bounce 5s infinite;
}
.contact .topbar .paperplane path{
	fill:#aab;
	transition:0.2s;
}
.contact .topbar .paperplane:hover path{
	fill:#445;
    transition:1s;
}
.contact .topbar .arrowDown{
	height:200px;
	width:100%;
	position:absolute;
	top:0;
	transition:1s;
}
/*	active*/
.contact.active .topbar{
	background-position:bottom right;
}
.contact.active .topbar .arrowDown{
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}
.contact.active .topbar .arrowDown polygon{
	fill:#fff;
	transition-delay:0.5s;
}
.contact.active .topbar .paperplane:hover path{
  fill:#fff;
}

@keyframes bounce {
	0% {
		top:50%;
	}
	25%{
		top:50%;
	}
	/*	---	*/
	32%{
		top:52%;
	}
	35% {
		top:40%;
	}
	40%{
		top:50%;
	}
	/*	---	*/
	70%{
		top:50%;
	}
	77%{
		top:52%;
	}
	80% {
		top:40%;
	}
	85%{
		top:50%;
	}
	/*	---	*/
	92%{
		top:52%;
	}
	95%{
		top:40%;
	}
	100% {
		top:50%;
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="contact">
		<div class="topbar">
			<svg version="1.1" class="arrowDown" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
				 viewBox="0 0 1000 125" enable-background="new 0 0 1000 125" xml:space="preserve" preserveAspectRatio="none">
				<polygon fill="#445" points="0,0 500,125 0,125"/>
				<polygon fill="#445" points="1000,0 500,125 1000,125"/>
			</svg>
			<svg version="1.1" class="paperplane" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 334.5 334.5" style="enable-background:new 0 0 334.5 334.5;" xml:space="preserve"> <path d="M332.797,13.699c-1.489-1.306-3.608-1.609-5.404-0.776L2.893,163.695c-1.747,0.812-2.872,2.555-2.893,4.481 s1.067,3.693,2.797,4.542l91.833,45.068c1.684,0.827,3.692,0.64,5.196-0.484l89.287-66.734l-70.094,72.1 c-1,1.029-1.51,2.438-1.4,3.868l6.979,90.889c0.155,2.014,1.505,3.736,3.424,4.367c0.513,0.168,1.04,0.25,1.561,0.25 c1.429,0,2.819-0.613,3.786-1.733l48.742-56.482l60.255,28.79c1.308,0.625,2.822,0.651,4.151,0.073 c1.329-0.579,2.341-1.705,2.775-3.087L334.27,18.956C334.864,17.066,334.285,15.005,332.797,13.699z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
		</div>
	</section>

2 个答案:

答案 0 :(得分：1)

这似乎可以消除看起来很脆弱的白线：JSFiddle

基本上我只是将你的filter: FlipV;替换为点击时切换的动画：

@keyframes flip {
  0% {transform:rotateX(0)}
  50% {transform:rotateX(180deg)}
  100% {transform:rotateX(360deg)}
}

我剥离了一些我认为干扰的其他CSS（飞机在悬停时变成白色，所以我无法看到它），如果你用你的OP来区分你可以看到什么＆＃39;已被删除......

如果用户点击了很多次，您还可以更新JS以防止动画跳过：

var timer;
var animDuration = 2000; // sync with `flip` animation
var bind = function(){
  $('.paperplane').on('click', function(){
    $(this).off('click');
    $('.contact').toggleClass('active');
    timer = setTimeout(function(){
      $('.contact').toggleClass('active');
      bind();
    }, animDuration);
  });
};

bind();

虽然你翻转它时没有得到很好的正面/负面效果......

答案 1 :(得分：0)

我使用d3.js解决了问题。通过转换三角形我避免了正面/负面效应。

$('.kontakt .topbar .paperplane').click(function(){
			if($('.kontakt').hasClass('active')){				
				d3.select('#poly1').transition()
					.duration(1500)
					.attr('points', '0,0 500,125 500,125 0,125');
				
				d3.select('#poly2').transition()
					.duration(1500)
					.attr('points', '1000,0 499.5,125 499.5,125 1000,125')
					.each("end", function() {
						$('.kontakt').removeClass('active');
					});
			
				$('.kontakt').removeClass('active');
			}else{	
				d3.select('#poly1').transition()
					.duration(1500)
					.attr('points', '0,125 500,0 500,125 0,125');
				d3.select('#poly2').transition()
					.duration(1500)
					.attr('points', '1000,125 499.5,0 499.5,125 1000,125')
					.each("end", function() {
						$('.kontakt').addClass('active');
					});
			}
		});
.kontakt{
	position:relative;
	background:#445;
}
.kontakt .topbar{
	height:200px;
	
	background:linear-gradient(to bottom, #fff 50%, #445 50%);
	background-size: 100% 200%;
    background-position:top right;
	transition:1s;
}
.kontakt .topbar .paperplane{
	width:75px;
	height:75px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	cursor:pointer;
	
	animation: bounce 5s infinite;
}
.kontakt .topbar .paperplane path{
	fill:#aab;
	transition:0.2s;
}
.kontakt .topbar .paperplane:hover path{
	fill:#445;
}
.kontakt .topbar .arrowDown{
	height:200px;
	width:100%;
	position:absolute;
	top:0;
	transition:1s;
}
/*	active*/
.kontakt.active .topbar .paperplane:hover path{
	fill:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<section class="kontakt">
		<div class="topbar">
			<svg version="1.1" class="arrowDown" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
				 viewBox="0 0 1000 125" enable-background="new 0 0 1000 125" xml:space="preserve" preserveAspectRatio="none">
				<polygon id="poly1" fill="#445" points="0,0 500,125 500,125 0,125"/>
				<polygon id="poly2" fill="#445" points="1000,0 499.5,125 499.5,125 1000,125"/>
			</svg>
			<svg version="1.1" class="paperplane" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 334.5 334.5" style="enable-background:new 0 0 334.5 334.5;" xml:space="preserve"> <path d="M332.797,13.699c-1.489-1.306-3.608-1.609-5.404-0.776L2.893,163.695c-1.747,0.812-2.872,2.555-2.893,4.481 s1.067,3.693,2.797,4.542l91.833,45.068c1.684,0.827,3.692,0.64,5.196-0.484l89.287-66.734l-70.094,72.1 c-1,1.029-1.51,2.438-1.4,3.868l6.979,90.889c0.155,2.014,1.505,3.736,3.424,4.367c0.513,0.168,1.04,0.25,1.561,0.25 c1.429,0,2.819-0.613,3.786-1.733l48.742-56.482l60.255,28.79c1.308,0.625,2.822,0.651,4.151,0.073 c1.329-0.579,2.341-1.705,2.775-3.087L334.27,18.956C334.864,17.066,334.285,15.005,332.797,13.699z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
		</div></section>

相关问题
最新问题