Vue2学习笔记:过渡效果css
过渡效果
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
<style type="text/css">
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<transition name="fade">
<div id="div1" v-if="isShow" transiton="fade">11111</div>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
isShow:false
},
methods:{
toggle:function(){
this.isShow = !this.isShow;
}
}
});
</script>
</body>
</html>
一开始不显示,点击后显示 有一个css的过渡方式
官方:https://vuefe.cn/v2/guide/transitions.htm
Vue2学习笔记:过渡效果css的更多相关文章
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- 前端学习:学习笔记(CSS部分)
前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...
- Webpack4 学习笔记二 CSS模块转换
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- 前端新人学习笔记-------html/css/js基础知识点
即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日 ...
- 前端学习笔记之CSS选择器
阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...
- Vue2 学习笔记1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- 前端学习笔记之CSS过渡模块
阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
随机推荐
- 《LeetBook》leetcode题解(17):Letter Combinations of a Phone Number[M]
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- VMware workstation 11 的下载
不多说,直接上干货! VMWare Workstation 11的下载详细: 谷歌FQ,进入. 具体怎么达到可以FQ,见 FQ软件lantern-installer-beta.exe(推荐) 成功! ...
- Maven启动代理服务器
0.什么叫代理服务器? 代理服务器英文全称是(Proxy Server),其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站. 代理服务器就好象一个大的Cache,这样就能显著提高浏 ...
- 自己动手实现一个WEB服务器
自己动手实现一个 Web Server 项目背景 最近在重温WEB服务器的相关机制和原理,为了方便记忆和理解,就尝试自己用Java写一个简化的WEB SERVER的实现,功能简单,简化了常规服务器的大 ...
- PHP PSR 标准
引用他人文章:http://www.cnblogs.com/52php/p/5852572.html PHP中PSR-[0-4]代码规范 PHP-FIG 在说啥是PSR-[0-4]规范的之前,我觉得我 ...
- 分布式处理与大数据平台(RabbitMQ&Celery&Hadoop&Spark&Storm&Elasticsearch)
热门的消息队列中间件RabbitMQ,分布式任务处理平台Celery,大数据分布式处理的三大重量级武器:Hadoop.Spark.Storm,以及新一代的数据采集和分析引擎Elasticsearch. ...
- 数据库应用(Mysql、Mongodb、Redis、Memcached、CouchDB、Cassandra)
目前,主流数据库包括关系型(SQL)和非关系型(NoSQL)两种. 关系数据库是建立在关系模型基础上的数据库,借助于集合代数等数学概念和方法来处理数据库中的数据,支持复杂的事物处理和结构化查询.代表实 ...
- ArrayDeque解析
Queue接口 public abstract boolean add(E paramE); public abstract boolean offer(E paramE); // 加入元素 publ ...
- ruby执行周期性任务
1.前言 无论是用ruby做系统管理,还是用rails做web开发,都可能遇到周期性任务,它们按照一定时间周期(1小时,2天......)持续地触发.在ruby中,我认为一次性任务使用sid ...
- java SE 入门之八大内置基本类型(第二篇)
本文采用eclipse 工具演示,如果您对eclipse 工具不了解,请先学习下 eclipse 工具的使用,这个里面只是简单的介绍下输出和注释: 安装完成eclipse 以后,双击进入 后一次点击 ...