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移动动画的更多相关文章

  1. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  2. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  3. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  4. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  5. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  6. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  7. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  8. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  9. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  10. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

随机推荐

  1. SpringBoot源码2——SpringBoot x Mybatis 原理解析（如何整合，事务如何交由spring管理，mybatis如何进行数据库操作）

    阅读本文需要spring源码知识,和springboot相关源码知识 对于springboot 整合mybatis,以及mybatis源码关系不密切的知识,本文将简单带过 系列文章目录和关于我 涉及到 ...

  2. Django聚合函数与分组查询

    目录 一:聚合查询 1.聚合函数作用 2.聚合函数查询关键字: 3.聚合函数 4.聚合函数使用 二:分组查询 1.分组查询 2.返回值 3.分组查询关键字 4.分组查询特点 5总结: 三:分组使用 1 ...

  3. Mysql-delete语句

    ` 点击查看代码 删除2天之前的所有数据 delete From lkt_files_record where DATE(add_time) <= DATE(DATE_SUB(NOW(),INT ...

  4. Python全栈工程师之从网页搭建入门到Flask全栈项目实战(6) - Flask表单的实现

    1.表单介绍 1.1.表单知识回顾 常见的表单元素: 表单标签<form> action:表单提交的URL地址 method:表单请求的方式(GET/POSt) enctype:请求内容的 ...

  5. Java7提供的Fork/Join框架实现高并发程序，你会使用吗？

    摘要:Fork/Join框架位于J.U.C(java.util.concurrent)中,是Java7中提供的用于执行并行任务的框架,其可以将大任务分割成若干个小任务,最终汇总每个小任务的结果后得到最 ...

  6. 云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM

    著意登楼瞻玉兔,何人张幕遮银阙?又到了一年一度的网页小挂件环节,以往我们都是集成别人开源的组件,但所谓熟读唐诗三百首,不会做诗也会吟,熟读了别人的东西,做几首打油诗也是可以的,但若不能自出机抒,却也成 ...

  7. 模块化编程相关知识-引入- 异步加载JS - CommonJS-AMD-CMD-ES6-

  8. 使用docker安装hadoop（已实现）

    1.拉镜像 这里推荐第一个 docker pull registry.cn-hangzhou.aliyuncs.com/hadoop_test/hadoop_base 或者 docker pull q ...

  9. maven依赖管理，生命周期，插件

    依赖配置 依赖指当前项目运行所需的jar,一个项目可以设置多个依赖,在pom.xml中格式如下 <!--设置当前项目所依赖的所有jar--> <dependencies> &l ...

  10. Java 进阶P-7.4+P-7.5

    JTable 用JTbale类可以以表格的形式显示和编辑数据. JTable类的对象并不存储数据,他只是数据的表现. 表格是 Swing 新增加的组件,主要功能是把数据以二维表格的形式显示出来,并且允 ...