jquery - 获取 CSS 动画流体

coder 2023-08-09 原文

如果你点击下面的纸飞机，我已经实现了一个镜像三 Angular 形并切换颜色的动画，但我正在努力让它流畅。有时它会卡住，你会在动画之间看到难看的白线。有谁知道如何改进此代码或有替代(更好)的方法来完成我的动画。

$('.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>

最佳答案

这似乎消除了看起来有问题的白线:JSFiddle

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

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

我删除了一些我认为有点干扰的其他 CSS(飞机在悬停时变成白色，所以我看不到它)，如果你将它与你的 OP 进行比较，你可以看到被删除的内容......

您还可以更新 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();

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

关于jquery - 获取 CSS 动画流体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39104911/

有关jquery - 获取 CSS 动画流体的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - 简单获取法拉第超时 - 2
有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url
ruby - 从 Ruby 中的主机名获取 IP 地址 - 2
我有一个存储主机名的Ruby数组server_names。如果我打印出来，它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点，但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类？输出:ge
ruby - 获取模块中定义的所有常量的值 - 2
我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？最佳答案为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c
ruby-on-rails - 获取 inf-ruby 以使用 ruby 版本管理器 (rvm) - 2
我安装了ruby版本管理器，并将RVM安装的ruby实现设置为默认值，这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时，它使用安装在/usr/bin中的ruby。有没有办法让emacs像shell一样尊重ruby的路径？谢谢! 最佳答案我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣，可以在这里获取:http://github.com/senny/rvm.el
Ruby 从大范围中获取第 n 个项目 - 2
假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？最佳答案一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit
jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
ruby - Net::HTTP 获取源代码和状态 - 2
我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。最佳答案在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur
ruby - 没有类方法获取 Ruby 类名 - 2
如何在Ruby中获取BasicObject实例的类名？例如，假设我有这个:classMyObjectSystem我怎样才能使这段代码成功？编辑:我发现Object的实例方法class被定义为returnrb_class_real(CLASS_OF(obj));。有什么方法可以从Ruby中使用它？最佳答案我花了一些时间研究irb并想出了这个:classBasicObjectdefclassklass=class这将为任何从BasicObject继承的对象提供一个#class您可以调用的方法。编辑评论中要求的进一步解释:假设你有对象
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

jquery - 获取 CSS 动画流体

有关jquery - 获取 CSS 动画流体的更多相关文章

随机推荐