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组件的实现. 组件结构 < ...
随机推荐
- python第一个程序-->hello world
最近在网上看到一个小笑话,一个程序员的自我嘲讽:“我精通所以计算机语言的hello world!” 好了,废话不多说了,开始撸代码: 我本人用的是python3.6版本,各位可以通过官网下载自己喜欢的 ...
- angularjs post data
//post json 时收不到数据,目前只找到方法post form形式的key-value值 //关键是设置 headers: { 'Content-Type': 'application/x- ...
- 图片验证码给AI使用
为了破解图形验证码,AI需要大量的图片数据.为了简单获取大量的图形来喂给Ai模型训练,索性自己写一把.代码来一发.. import java.awt.Color; import java.awt. ...
- Android stadio bug
好生气啊,android stadio 有bug.自己的代码,一直没有生效,原来是stadio 的问题.只是因为我打开了增强模式,后来,buildToolVersion 改了之后,android st ...
- java字符流实现文件间的内容复制
package com.io.demo1; import java.io.FileReader; import java.io.FileWriter; public class TestFileSTr ...
- thrift安装
yum -y install gcc-c++ autoconf automake sysconftool boost boost-devel libtool perl-ExtUtils-MakeMak ...
- 梳理 Opengl ES 3.0 (一)宏观着眼
Opengl ES 可以理解为是在嵌入式设备上工作的一层用于处理图形显示的软件,是Opengl 的缩水版本. 下图是它的工作流程示意图: 注意图中手机左边的EGL Layer Opengl ES是跨平 ...
- 学习bash——环境配置
一.环境配置文件的重要性 Bash在启动时直接读取这些配置文件,以规划好bash的操作环境. 即使注销bash,我们的设置仍然保存. 二.login shell 通过完整的登录流程取得的bash,称为 ...
- 利用calibre抓取新闻
Adding your favorite news website calibre has a powerful, flexible and easy-to-use framework for dow ...
- ssh问题_1
昨天配置了虚拟机的ssh,可以相互连接,但是今天早上就不行了,遇到如下错误 [slave1@hadoop ~]$ scp .ssh/id_rsa.pub master@hadoop.master:~/ ...