<!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. Python自动化运维——文件内容差异对比

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 模块:difflib 安装:Python版本大于等于2.3系统自带 功能:对比文本之间的差异,而且支持输出可读性比 ...

  2. mysql学习第三天练习（多表连接）

    -- 多表连接 -- 写一条查询语句,查询员工姓名.部门名称.工作地点 select ename,dname,loc from emp,dept where emp.deptno = dept.dep ...

  3. linux io 学习笔记（01）---锁，信号量

    1.采用信号量访问:当有段临界代码,需要保证排他的访问一个资源. 2.sudo  dmesg -c 消除dmesg缓冲 3.互斥锁:代表的是一种锁资源,互斥锁的工作原理是:保证对共享资源操作的原子性 ...

  4. List中的FindAll用法

    在泛型List中查找符合某个字段的全部数据,可以采用如下方式: //1.现将实体数据listList<ADDaAn> objDAList = db.ADDaAns.ToList(); // ...

  5. Excel拼接字符串

             有时候,需要把一些Excel表格中的内容进行拼接,比如A4行的值是前面三行值的加起来.在Excel中可以使用&来进行这种操作.如果数据非常多,就可以使用这个来进行批量操作.

  6. 【目录】Spring 源码学习

    [目录]Spring 源码学习 jwfy 关注 2018.01.31 19:57* 字数 896 阅读 152评论 0喜欢 9 用来记录自己学习spring源码的一些心得和体会以及相关功能的实现原理, ...

  7. [网站日志]当Memcached缓存服务挂掉时性能监视器中的表现

    我们用的Memcached缓存服务是阿里云OCS,今天晚上遇到了一次OCS挂掉的情况(计划中的升级),看一下性能监视器中的表现,也许对分析黑色1秒问题有帮助. 应用日志中错误: 2014-06-05 ...

  8. Android学习笔记之，调用系统图库，添加自定义字体，屏幕截图

    新年开始的第一天就来学习了慕课迎春活动中的Android心愿分享一课,学到了几个知识点,在此记录一下. 1.调用系统图库调用系统图库用的是intent,步骤为弹出系统图库选择器,选择图片后获取到所选择 ...

  9. jmeter更改启动编码设置

    项目中碰到这样的问题,在eclipse经过utf-8转码的代码,能正常运行,放到了jmeter里面运行,就是乱码,如下: String s = "乔佳飞"; String ss = ...

  10. iOS-Debug Symbol(调试符号)

    Debug Symbol(调试符号) 编译警告 从svn下载下来的文件,到处都是编译警告,看着不爽,找下原因,没想到还是一条大鱼 warning: (i386) /UsersLibrary/Devel ...