<!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. R语言学习笔记（十二）：零碎知识点(31-35)

    31--round(),floor()和ceiling() round()四舍五入取整 floor()向下取整 ceiling()向上取整 > round(3.5) [1] 4 > flo ...

  2. Lambda表达式详解【转】

    前言 1.天真热,程序员活着不易,星期天,也要顶着火辣辣的太阳,总结这些东西. 2.夸夸lambda吧:简化了匿名委托的使用,让你让代码更加简洁,优雅.据说它是微软自c#1.0后新增的最重要的功能之一 ...

  3. netty学习记录2

    昨天晚上在看到7.2章MessagePack编码器和解码器开发这一章时,书里面没有贴出全部的代码,然后我按照我自己的想法把代码补全后,发现死活没有把代码跑通. 然后花了挺多时间在网上找,很多博客都贴出 ...

  4. 类的__new__方法使用

    class Person(object): def __init__(self): self.name ="aaa" def defineName(self): self.name ...

  5. 链接程序的时候遇到问题：fatal error LNK1104: cannot open file 'rctrl-d.lib'

    1.lib库文件没有添加到工程中(工程里面根本就没有这个文件) 2.

  6. 类和实例属性的查找顺序 mro查找

    如果多个类继承父类,然后又被多个类继承这种复杂的问题,可以使用 mro方法 例如: class A: pass class C(D): pass class B(D): pass class A(B, ...

  7. Django数据模型--表关系(一对多)

    一.一对一关系 使用方法:models.ForeignKey(要关联的模型) 举例说明:年级.教师和学生 from django.db import models class Grade(models ...

  8. JAVA集合面面观

    List的常用实现:vector,ArrayList,linkedList. 总体关系如下(java8): vector和arraylist 两者底层都是采用数组的形式.但是有些许不同 // Arra ...

  9. 【iOS开发】IOS界面开发使用viewWithTag:(int)findTag方法获取界面元素

    http://blog.csdn.net/lxp1021/article/details/43952551 今天在开发OS界面的时候,遇到通过界面UIview viewWithTag:(int)fin ...

  10. D - 小木棒

    D - 小木棒 Time Limit: 1000/1000MS (C++/Others) Memory Limit: 65536/65536KB (C++/Others) Problem Descri ...