CSS3移动动画
transition: .3s all ease;
.tmall .tmall-tabbodys {
width: 100%;
position: absolute;
left: 0px;
transition: .7s all ease;
}
动果切换带有运营商校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding:0;margin:0;box-sizing:border-box}
.row{display:flex;flex-direction:row}
.tmall{width:290px;padding:10px 20px 0px;background:#ffffff;position:relative;border:1px solid #ccc}
.tmall{width:290px;padding:10px 20px 0px;background:#ffffff;position:relative}
.tmall .tmall-tabs .tab{padding:3px 10px;font-size:14px;color:#666}
.tmall .tmall-tabs .tab.current{color:#FF4300}
.tmall-tabbody-container{width:100%;height:300px;overflow:hidden;position:relative;margin-top:15px}
.tmall .tmall-tabbodys .tabbody{min-width:250px;width:250px;padding-top:4px}
.tmall .tmall-tabbodys .tabbody .input-group{width:188px}
.space-between{justify-content:space-between}
.tmall .tmall-tabbodys{width:100%;position:absolute;left:0px;transition:.3s all ease;margin-top:20px}
.input{height:26px;border:1px solid #cccccc;position:relative}
.input input.hasricon{padding:4px 20px 4px 6px}
.input .tip{height:24px;font-size:12px;color:#cccccc;position:absolute;top:0;right:26px}
.center{display:flex;justify-content:center;align-items:center}
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}
.input .ricon{width:26px;height:24px;color:#cccccc;position:absolute;top:0;right:0}
.input input.hasricon{padding:4px 20px 4px 6px}
.input input{padding:4px 6px}
.input input{color:#000000;font-size:12px}
.fill{width:100%;height:100%}
input{border:none;outline:none;display:block}
.input .select-option{position:absolute;top:24px;left:-1px;color:#000000;background:#fafafa;width:-webkit-calc(100% + 2px);border:1px solid #cccccc;border-bottom:none}
.input .select-option li:nth-child(odd){border-right:1px solid #a9a9a9}
.input .select-option li{width:50%;height:30px;font-size:14px;float:left;border-bottom:1px solid #a9a9a9}
.input .select-option li span{font-weight:bold}
.input .select-option li:hover{background:#a9a9a9;color:#ffffff}
.input:hover{border:1px solid #a9a9a9;color:#000000;z-index:999}
.pointer{cursor:pointer}
.input-group .button{border:none;border-radius:2px;padding:0;height:27px;width:68px;line-height:27px;background:#ff4200;font-size:12px;font-weight:700;color:#fff}
.input-group .price span{color:#f60;font-weight:700;font-family:verdana,arial}
.input-group .price{font-size:14px;padding:5px 0;color:#666666}
</style>
</head>
<body>
<!-- 知识点：动画，@click赋值， -->
<div id="app">
<div id="tmall" class="tmall">
<div class="tmall-tabs row space-between">
<div class="tab pointer" v-for = 'value,index in tabs' :class="{'current':index == cur}" @click = 'cur = index'
>{{value}}</div>
</div>
<div class="tmall-tabbody-container">
<div class="input">
<input type="text" placeholder="请输入手机号码" class="fill hasricon" v-model="mobile">
<div class="tip center"><i class="iconfont"></i>{{getSP(mobile)}}</div>
<div class="ricon center"><i class="iconfont"></i></div>
</div>
<div class="tmall-tabbodys row space-between" :style = "{left:-250*cur+'px'}">
<div class="tabbody">
<div class="input-group">
<div class="input mg-1 pointer" @click="listShow=true">
<input type="text" disabled="disabled" class="fill hasricon pointer" :value="curAmount+'元'">
<div class="ricon pointer center"><i class="iconfont">^</i></div> <div class="select-option" v-show ="listShow">
<ul>
<li class="center" v-for ="amount in amountList"
@click.stop = 'curAmount = amount;listShow=false;'><span>{{amount}}</span>元</li>
</ul>
</div>
</div>
<div class="price">售价：¥<span v-if = "curAmount"> {{curAmount!=0?curAmount-0.1:curAmount}} 元</span></div>
<div class="button pointer center">立即充值</div>
</div>
</div>
<div class="tabbody"><div class="input-group">222</div></div>
<div class="tabbody"><div class="input-group">333</div></div>
<div class="tabbody"><div class="input-group">444</div></div>
</div>
</div>
</div>
</div>
</body>
<script src="vue2.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
tabs:['充话费','充流量','充固话','充宽带'],
amountList: [10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000],
cur:0,
mobile:'',
curAmount:0,
listShow:false,
},
methods:{
getSP(str){
if(str.length!=11){
return '';
}else{
if(/^((13[5-9])|(15[01289]))/.test(str)){
return '中国移动';
}else if(/^(13[0-2])/.test(str)){
return '中国联通';
}else if(/^(18[01])/.test(str)){
return '中国电信';
}else if(/^170/.test(str)){
return '虚拟运营商';
}else{
return '未知';
}
}
},
}
})
</script>
</html>
注意：当@click嵌套时，最里边的@click点击是无效的，解决里边@click.stop阻止冒泡
<div @click="listShow=true">
<div @click.stop = 'curAmount = amount;'></div>
</div>
运营商规则：
移动：
134X(0-8)、135、136、137、138、139、150、151、152、157X(0-7\9)(TD)、158、159、182 、183、184、187（3G\4G)、188(3G)147(数据卡）、178（4G） 联通：
130、131、132、155、156、185(3G)、186(3G) 、145(数据卡）、176（4G） 电信：
180(3G)、181(3G)、189(3G)、133、153、（1349卫通） 、177（4G） 虚拟运营商：
170
CSS3移动动画的更多相关文章
- CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
随机推荐
- 【kafka】JDBC connector进行表数据增量同步过程中的源表与目标表时间不一致问题解决
〇.参考资料 一.现象 1.Oracle源表数据 2.PG同步后的表数据 3.现象 时间不一致,差了8个小时 4.查看对应的connector信息 (1)source { "connecto ...
- async.js 版本兼容问题 async.filter举例
async3.x 和async2.6.1 版本下 const files = ['dir1/file1.txt','dir2/file3.txt','dir3/file6.txt']; // Usin ...
- 自研分布式高性能RPC框架及服务注册中心实践笔记【原创】【开源】
痛点 1. bsf底层依赖springcloud,影响bsf更新springboot新版本和整体最新技术版本升级. 2. eureka已经闭源,且框架设计较重,同时引入eureka会自行引入较多spr ...
- JavaScript中的防抖与节流-图文版
01.防抖还是节流 防抖 与 节流 目的都是避免一定时间内,大量重复的操作造成的性能损耗.因此原理也类似,都是阻止过多的事件执行,只保留一部分来执行.适用场景略有不同,也有交叉,动手练习一遍就懂了. ...
- Vue element 自定义表单验证(验证手机号)
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" ...
- QT中常用控键
1.TableWidget类 1.1. 表格属性设置 1.1.1设置行列属性 //设置行列均分 tableWidget->horizontalHeader()->setStretchLas ...
- 3、swagger-ui导出word接口文档
参考 1.修改swagger2word项目的 application.yml 文件的 swagger.url 为Swagger Json资源的url地址(网址+端口): 例:swagger.url: ...
- Mapper的动态代理
可以自动生产接口的实现类 ,所以就不需要再写daoImpl这个实现类了, 直接使用sqlSession.getMapper自动生成实现类 @Before 此注解的目的是为了将@Befoe 作为首先执行 ...
- [常用工具] OpenCV_contrib库在windows下编译使用指南
本文主要讲述opencv及opencv_contrib库在windows下基于vs2017编译安装指南.所用OpenCV版本为OpenCV4.4,编译平台为vs2017. 文章目录 1 下载 2 编译 ...
- [WPF]DataContext结果不显示
namespace DataContext_ItemSource_Demo { public class Person { public string Name; } public class Vie ...