vue2.0transition过渡的使用介绍
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script type="text/javascript" src="vue.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
p {
width: 300px;
height: 300px;
background: red;
}
/* 定义动画 */
.fade-enter-active,.fade-leave-active {
transition: all 1s ease;
} /*
* 定义过渡
*/ /* .fade-enter,.fade-leave-active {
opacity: 0
} */ /*
* 定义宽高动画
*/
.fade-enter-active{
opacity:1;
width:300px;
height:300px;
}
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
}
/* 重要：定义初始状态 */
.fade-enter{
opacity:0;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var app = new Vue({
el:'#box',
data:{
show:false
}
})
}
</script>
</head>
<body>
<div id="box">
<!-- 控制数据的值切换显示隐藏 -->
<button @click="show=!show">transition</button>
<transition name="fade">
<p v-show="show"></p>
</transition>
</div>
</body>
</html>
vue2.0transition过渡的使用介绍的更多相关文章
- vue2 的 过渡（动画）效果
1.在过渡 效果的使用中 ,key属性需要注意 : 有相同父元素的子元素必须有独特的 key.重复的 key 会造成渲染错误. 参考官方说明: https://cn.vuejs.org/ ...
- vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04
<template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...
- vue2.0-transition多个元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0-transition配合animate.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0-transition动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0 transition -- demo实践填坑
前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...
- 介绍activity文档翻译
原文链接:https://developer.android.google.cn/guide/components/activities/intro-activitiesSS 一, 对activit的 ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue2.0 axios封装、vuex介绍
一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, ...
随机推荐
- matlab中同一文件定义子函数的方法
在matlab中一个.m文件中可以有多个的子函数,但仅能有一个主函数,并且M文件名必须和主函数相同在一个m文件中通常有两种定义子函数的方法: 1.嵌套定义 myfunc1会和主函数共享变量名.这种情况 ...
- Java IO流学习总结八：Commons IO 2.5-IOUtils
Java IO流学习总结八:Commons IO 2.5-IOUtils 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/550519 ...
- 【12c】扩展数据类型（Extended Data Types）-- MAX_STRING_SIZE
[12c]扩展数据类型(Extended Data Types)-- MAX_STRING_SIZE 在12c中,与早期版本相比,诸如VARCHAR2, NAVARCHAR2以及 RAW这些数据类型的 ...
- margin：0 auto；不居中?
1.没有设置宽度 <div style="margin:0 auto;"></div> 看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手 ...
- 前端项目经验总结之js防缓存（避免缓存的影响）
一.问题描述:打包后的h5项目中有个server.js文件夹,这个文件夹有些时候用户更新了h5,但是加载的还是旧的server.js,所以怀疑是缓存的问题,为了避免缓存的影响所以要给server.js ...
- 阿里云服务器 发送邮箱 STMP 25端口 465端口问题 Javamail 25被禁用
我们传统使用的比较简单的是 STMP 25端口收发邮件 今天发现刚购买的阿里云服务器不能作为客户端通过STMP 25端口发送邮件 开始在网上有说发现是JDK1.8的原因,然后自己也把JDK1.8换到了 ...
- 每天一个linux命令(54)--watch命令
watch是一个非常实用的命,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省的你一遍遍的手动运行,在Linux下,watch是周期性的执行下个程 ...
- 用JS获取地址栏中的参数的简易方法
这个方法用起来超级简单,传入参数即可直接获取地址栏中的参数 代码如下 function GetQueryString(name) { var reg = new RegExp("(^|&am ...
- Flex 布局教程
今天给大家分享一下flex布局的语法 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于 ...
- 把Eclipse项目转换成Maven项目
把Maven项目转换成Eclipse项目只要使用Maven的Eclipse插件就能做到 mvn eclipse:eclipse 其实Maven的Eclipse插件也有把Eclipse项目转换成Mave ...