javascript - 表单提交上的 CSS/JQuery/Angular 转换

标签 javascript jquery html css angularjs

我在 Behance 上遇到了这个漂亮的 UI 模型,我很好奇实现它的最佳方法。

https://www.behance.net/gallery/25264659/Google-transitions

基本上,我希望我的搜索栏和 Logo 在提交表单(也称为文本输入)后完全像这样动画到顶部。

我的应用程序是一个 Angular 应用程序,那么创建一个 Angular 指令会更实用吗?还是使用纯 CSS 或 JQuery(独立于 Angular)来实现?

最佳答案

您的动画将独立于 AngularJS。关于动画的性能,JQuery 是迄今为止绝对最慢的。标准是使用 CSS 过渡/动画。如果你对 CSS 不满意,那么使用 velocity.js 之类的东西。它的语法类似于 JQuery,但使用了 window.requestAnimationFrame 使其可能比 CSS 更快。

Angular 的所有用途都是调用动画或添加/删除一个类,以便在搜索进行时将 CSS 转换为动画。

至于动画本身,不幸的是我帮不上什么忙,这些东西往往需要付出很多努力才能看起来不错。

关于javascript - 表单提交上的 CSS/JQuery/Angular 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29775791/

相关文章:

javascript - 检测移动浏览器

javascript - 为什么node.js没有加载我需要的模块?

javascript - jQuery 如何捕获 tbody 中的嵌套值?

javascript - 如何在选择时显示整个div

javascript - 使用渲染 Prop 创建切换按钮以显示/隐藏子组件的问题

javascript - 显示多个字幕的 html5 视频

javascript - 如何设置数组中推送对象的属性?

javascript - JS - 检测用户何时清除字段

javascript - 如何使用模式对话框 Bootstrap 获取输入表单的值?

javascript - 地理定位 api 中是否有类似 isGeolocationAllowed 或 isGeolocationAllowedForever 的函数?