ionic css过渡配合ng-class做表单的label点击上移
来源:互联网 发布:java考试系统源码下载 编辑:程序博客网 时间:2024/06/06 11:09
1、需求描述:
在表单中,点击input,input中的placeholder上移成为label标签
2、代码:
css :
//表单中的label随着获取焦点上移.label-slide-up{ font-size: 0.32rem; color:#97a6ac; transition: all linear 0.5s; position: absolute; top:18px;}.slide{ font-size: 0.24rem; line-height: 0.32rem; top:-2px;}
html
<label class="item item-input item-stacked-label"> <span class="input-label label-slide-up {{slide1}}" ng-class="{true:'slide',false:'label-slide-up'}[myModel]">Unit or Apartment Number</span> <input name="apartmentNUm" type="text" ng-model="myModel" ng-focus="!myModel&&(slide1 = 'slide')" ng-blur="!myModel&&(slide1='')"> </label>
这里面有个需求就是,当model有值时,此时的label应该就是在input上方,不然就跟你的input中的内容重合了(很难看的),,所以我在ng-focus和ng-blur前面都加了判断条件,即model必须是没有值,才给class slide1去赋值,这样才能达到效果。
看看效果吧:
阅读全文
0 0
- ionic css过渡配合ng-class做表单的label点击上移
- ionic之使用ng-class控制样式
- [] 重置表单class ng-dirty
- Ionic 的 ng-class 在聊天功能上面的巧妙运用
- ng-class的使用
- JavaScript配合Css滤镜实现页面过渡效果
- ionic label下加button的说明
- 点击键盘,控件上移的方式
- CSS transition的过渡效果
- 关于CSS的过渡模块
- css样式的过渡问题
- IONIC 表单标签的使用
- ng-repeat 中动态绑定ng-click 点击事件处理函数&动态改变ng-class
- 关于AngularJS的ng-class
- 关于AngularJS的ng-class
- ng-class与class的区别
- 针对class、id所做的css hack
- 使用了ng-repeat 后的样式显示 ng-class 、ng-hide ng-show ng-if ng-style
- java中的正则表达式
- 数据挖掘-归一化
- Shell基础
- iOS 9的 Core Image新滤镜
- Python的sftp实现传文件夹和文件
- ionic css过渡配合ng-class做表单的label点击上移
- RobotFramework环境配置二十五:Test Setup & Teardown 问题
- chromium rendering pipeline
- 秒懂快速排序法
- jdk1.7之Hashtable
- Unity之ShareSDK分享之安卓
- word2vec基本概念
- 算(qbxt)
- 筆記_變量、作用域和內存問題