<!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. CONCATENATE命令(文字列の結合)

    CONCATENATE命令とは文字列の結合を行う命令である.文字列を扱うChar, Numeric, Dats, Time, Stringの変数で使用する事が可能だ.単純に文字列の結合のみを行う方法. ...

  2. C# 控制台应用程序输出颜色字体

    最佳解决方案的代码: static void Main(string[] args) { Console.ForegroundColor = ConsoleColor.Green; Console.W ...

  3. Java面试题集合

    1.Java的HashMap是如何工作的? HashMap是一个针对数据结构的键值,每个键都会有相应的值,关键是识别这样的值. HashMap 基于 hashing 原理,我们通过 put ()和 g ...

  4. table调整td宽度整理-完美解决--费元星前端

    个人整理例子,留下做个备份 最终重要的几句话 0.日期格式 format="ognl:dateFormat" <td align="center"> ...

  5. 使用USB Key(加密狗)实现身份认证

    首先你需要去买一个加密狗设备,加密狗是外形酷似U盘的一种硬件设备! 这里我使用的坚石诚信公司的ET99产品 公司项目需要实现一个功能,就是客户使用加密狗登录, 客户不想输入任何密码之类的东西,只需要插 ...

  6. Leetcode 简略题解 - 共567题

    Leetcode 简略题解 - 共567题     写在开头:我作为一个老实人,一向非常反感骗赞.收智商税两种行为.前几天看到不止两三位用户说自己辛苦写了干货,结果收藏数是点赞数的三倍有余,感觉自己的 ...

  7. 自动化测试--封装getDriver的方法

    在自动化测试的时候,通常都会把最常用的功能封装起来,实现通用性. 该篇博客是实现了getDriver方法的封装. 第一次封装的时候,是使用的传参. @Parameters(value = {" ...

  8. 第一课：SVN代码管理

    SVN:是一个跨平台的开源的版本控制系统.svn版本管理工具管理着随时间改变的各种数据.这些数据放置在一个中央资料档案库中.svn会备份并记录每个文件每次的修改更新变动.svn的工作流程:1.在中央库 ...

  9. import方法引入模块详解

    在python用import或者from...import或者from...import...as...来导入相应的模块,作用和使用方法与C语言的include头文件类似.其实就是引入某些成熟的函数库 ...

  10. 【Linux】——实用命令

    [前言] Linux的命令可以分为文件存取.目录操作.进程管理.权限管理.磁盘操作等内容,大量的命令方便了用户进行更快捷更高效的工作.但有一点需要说明的是,如果不采用linux的命令,也可以完成相应的 ...