vue-transition-fade

<!Doctype>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport"

          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .page-wrapper {

            position: relative;

        }

        .title {

            font-size: 22px;

            font-weight: 600;

            color: #333;

            text-align: center;

        }

        ul li {

            color: #333;

            padding: 6px 12px;

            height: 30px;

            line-height: 30px;

            border-bottom: 1px solid #ccc;

        }

        .btn {

            padding-top: 20px;

            text-align: center;

        }

        button {

            padding: 12px 26px;

            display: inline-block;

            width: 120px;

            color: #fff;

            font-size: 16px;

            text-align: center;

            background: #0cc;

            border: none;

            border-radius: 6px;

        }

        .pop {

            position: fixed;

            top: 0;

            left: 0;

            z-index: 100;

            width: 100%;

            height: 100%;

            overflow: auto;

            background: rgba(7, 17, 27, 0.8);

        }

        .pop.fade-enter-active, .pop.fade-leave-active {

            transition: all 1s ease

        }

        .pop.fade-enter, .pop.fade-leave-active {

            opacity: 0

        }

        .pop-wrapper {

            min-height: 100%;

            width: 100%;

        }

        .pop-main {

            margin-top: 64px;

            padding-bottom: 84px;

        }

        .pop-close {

            position: relative;

            margin: -64px auto;

            width: 36px;

            height: 36px;

            clear: both;

            font-size: 32px;

            background: rgba(0, 0, 0, .7);

            color: #fff;

            border-radius: 100%;

            text-align: center;

        }

        .img-area {

            padding: 20px 10px;

            text-align: center;

        }

        .pop-wrapper img {

            width: 100%;

        }

        .pop-close i {

            display: inline-block;

            font-style: normal;

            font-size: 22px;

            line-height: 36px;

        }

    </style>

</head>

<body>

<div id="app">

    <div class="page-wrapper">

        <div class="title">首页内容</div>

        <div class="btn">

            <button type="button" @click="showPop()">点击出现</button>

        </div>

        <ul>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

            <li>电子商务有限公司所有</li>

        </ul>

        <div id="transition-pop">

            <transition name="fade" @before-enter="popComplete">

                <div class="pop" v-show="popShow">

                    <div class="pop-wrapper">

                        <div class="pop-main">

                            <div class="img-area">

                                <img src="../img/bg.png">

                            </div>

                            <div class="btn">

                                <button>下一页</button>

                            </div>

                        </div>

                    </div>

                    <div class="pop-close" @click="hidePop()">

                        <i>X</i>

                    </div>

                </div>

            </transition>

        </div>

    </div>

</div>

<script src="../vue.js"></script>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            popShow: false

        },

        methods: {

            showPop: function () {

                this.popShow = true;

            },

            hidePop: function () {

                this.popShow = false;

            },

            popComplete: function () {

                console.log('000');

            }

        }

    }).$mount('#transition-pop');

</script>

</body>

</html>

vue-transition-fade的更多相关文章

vue transition
Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...
vue transition实现页面切换效果
我们都知道vue可以做成单页应用点击的时候就能切换如果我们要添加一些视觉效果比如页面切换的时候有一个缓冲效果这个时候就需要用到vue里的transition这个标签在使用这个标签之前需要了 ...
记录一下vue transition 过渡各状态（）
.slide-fade-enter{ opacity: 0; transform: translateX(100px); /*从哪里开始过渡:在过渡之前我就把位置定义在100px的位置,并 ...
vue学习笔记
来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件.关于vue有一些点是文档中没有提及的,记录一下以便以后查询- 一.Vue的特点新一代 Vue.js 框架非常关注如何用极少的外部特性 ...
Vue.js相关知识1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue 过渡
过渡通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数 ...
Vue过渡与动画
通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...
Vue1.0用法详解
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署可参考使用 vue+webpack. 基本用法 1 2 3 ...
VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下首先我先试了下国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...

随机推荐

hadoop jar x.jar 执行过程
hadoop jar x.jar 执行过程 Yarn框架执行内容 1,job.waitforcompletion() 启动 Runjar 进程 -> Resourcemanage申请一个j ...
java使用urlConnection抓取部分数据乱码
使用urlconnection做抓取的同学应该一开始都是使用这个吧.OK回到正题来..... 在内容己有中文.英文己正常显示,仍然会有部分中文或英文出现乱码,这是为什么呢?这个问题一直在心里盘旋... ...
Android面试收集录电话、短信和联系人、多媒体技术
1.请写出调用系统拨号界面? Intent intent=new Intent(Intent.ACTION_DIAL,Uri.pase("tel:12345678910")); s ...
签名的html
<b><a href="http://www.feiyuanxing.com" style="color:red">未来星开发团队--狒 ...
一些可能有点用处的C#开发经验
前言: 下个月就要去进行Java开发了,以后C#碰的就少了(可惜去年买了三本C#的书,几乎还是全新的……),平时一些经验都记在OneNote里面,现在收集整理出来,因为只能利用交接工作的打酱油的时间, ...
剖析DI
0x00.前言当我们研究一些晦涩的源码,上网查阅资料的时候,映入眼帘的总有这么些名词:DIP.IOC.DI.DL.IOC容器这些专业名词.如果不懂这些名词背后的含义,我们内心有可能是这样的: 0x0 ...
CSS里一个奇怪的属性
事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...
2.Linux文件和目录
1. 目录和路径 linux下比较特殊的目录: . 代表此层目录 .. 代表上一层目录 - 代表前一个工作目录 ~ 代表『目前使用者身份』所在的home目录 ~account 代表 account 这 ...
命令行编译 WPF
在开发调试代码 WPF 时,经常需要在修改完成代码后,点击 Rebuild,然后到指定文件夹下点击打开对应的 .exe 验证程序是否正确, 可以通过以下命名实现修改程序后,点击一个 .bat 文件,直 ...
配置SSH无密钥登陆(三)
配置SSH无密钥登陆 (1).关闭防火墙对每个虚拟机进行如下操作: su chkconfig iptables off 执行之后重启虚拟机:reboot (2).关闭之后,在maste ...

vue-transition-fade

vue-transition-fade的更多相关文章

随机推荐

热门专题