<!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的更多相关文章

  1. vue transition

    Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...

  2. vue transition实现页面切换效果

    我们都知道vue可以做成单页应用 点击的时候就能切换  如果我们要添加一些视觉效果 比如页面切换的时候有一个缓冲效果 这个时候就需要用到vue里的transition这个标签 在使用这个标签之前需要了 ...

  3. 记录一下vue transition 过渡各状态（）

    .slide-fade-enter{   opacity: 0;   transform: translateX(100px);   /*从哪里开始过渡:在过渡之前我就把位置定义在100px的位置,并 ...

  4. vue学习笔记

    来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件.关于vue有一些点是文档中没有提及的,记录一下以便以后查询- 一.Vue的特点 新一代 Vue.js 框架非常关注如何用极少的外部特性 ...

  5. Vue.js相关知识1

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. Vue 过渡

    过渡 通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数 ...

  7. Vue过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...

  8. Vue1.0用法详解

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...

  9. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  10. 用vue实现模态框组件

    基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...

随机推荐

  1. Java 中编码与摘要算法

    URL 编码与解码 String s = "你好,世界!"; // URL 编码 String urlEncodedString = URLEncoder.encode(s, &q ...

  2. Linux：如何获取打开文件和文件描述符数量

    一.linux的文件描述符 文件描述符(FD:file descriptors),也可以说是文件句柄,当某个程序打开文件时,内核返回相应的文件描述符,程序为了处理该文件必须引用此描述符.文件描述符是一 ...

  3. IAR工程名修改

    修改.dep..ewd..ewp..eww四个文件的文件名 删除.ewt文件(如果存在) 记事本打开.eww文件,修改<path></path>间的.ewp文件名 打开工程,打 ...

  4. CC3100BoosterPack和CC31XXEMUBOOST板子的测试

    1. 先测试右边的CC3100BoosterPack,测试发现LDO坏了,无法输出3.3V,所以只能用左边的板子供电. 2. 插上CC31XXEMUBOOST板子的J1,两个板子插在一起,等待驱动安装 ...

  5. 两个完整的jquery slide多方面滑动效果实例

    实例1,需要引用jquery-ui.js <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  6. html5判断设备的动作

    相应的事件 deviceorientation事件提供设备的物理方向信息,表示为一系列本地坐标系的旋角. devicemotion事件提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标.其还 ...

  7. 基于阿里云服务器Linux系统部署JavaWeb项目

    前段时间刚完成一个JavaWeb项目,想着怎么部署到服务器上,边学边做,花了点时间终于成功部署了,这里总结记录一下过程中所遇到的问题及解决方法.之所以选择阿里云,考虑到它是使用用户最多也是最广泛的云服 ...

  8. 虚拟现实-VR-UE4-认识UE4

    VR的火热,让每个人都想参与一下, 公司在展会上面搞了一个VR的Demo,关注度超出预期,使得公司高层决定来个VR项目 所以 关于UE4 百度百科地址:http://baike.baidu.com/l ...

  9. 权值树状数组 HDU-2852 KiKi's K-Number

    引入 权值树状数组就是数组下标是数值的数组,数组存储下标对应的值有几个数 题目 HDU-2852 KiKi's K-Number 题意 几种操作,p=0代表push:将数值为a的数压入盒子 p=1代表 ...

  10. Kindle 3（非常旧的版本） 隔一段时间自动重启问题

    买了本新书后,kindle 3 自己没事就在那边重启,几分钟一次 查到解决方案1: https://answers.yahoo.com/question/index?qid=2014040815565 ...