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项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, ...
随机推荐
- 小机器人自动回复（python，可扩展开发微信公众号的小机器人）
api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...
- C# 添加、获取及删除PDF附件
C# 添加.获取及删除PDF附件 前言 附件在PDF文档中很常见,这些附件可以是PDF或其他类型的文件.在PDF中,附件有两种存在方式,一种是普通的文件附件(document-level file a ...
- kali linux live(persistence)+PE+windows7安装多启动菜单优盘制作
需要以下工具: 下载链接: 一.制作kali linux persistence 将32GU盘格式化为FAT32格式,使用win32diskimager将kalilinux镜像写入优盘,占用优盘3.4 ...
- 深度神经网络（DNN）模型与前向传播算法
深度神经网络(Deep Neural Networks, 以下简称DNN)是深度学习的基础,而要理解DNN,首先我们要理解DNN模型,下面我们就对DNN的模型与前向传播算法做一个总结. 1. 从感知机 ...
- JavaScript中国象棋程序（2） - 校验棋子走法
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第2节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- BZOJ 1076: [SCOI2008]奖励关(概率+dp)
首先嘛，看了这么久概率论真的不错啊。看到就知道怎么写（其实也挺容易的= =） 直接数位dp就行了 CODE： #include<cstdio> #include<cstring> ...
- Android 反射-换一种方式编程
Android 反射-换一种方式编程 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/59109933 本文出自[赵彦军的博客] 上一 ...
- angular ui-router 正则
{id:[0-9a-fA-F]{1,8}} 如果在找ui-router 时,会看到以上的正则 我解释一下 id是param,可以把必备的结果收起来 []里面的必配的正则,但只是给一个string {} ...
- postman传json串,以及postman官方文档
最近在调试接口遇到一个问题.就是post接口传的body是一个json串. 刚开始还不知道,百度了一下才知道,其实很简单,就是在raw里面选择json.我的天如此简单的内容,而且支持html. 于是读 ...
- Eclipse打JAR包的使用
编译Java代码你当然可以直接使用Javac,但对于大多同学还是使用Eclipse编辑器来得快捷.这篇文章来说说我使用Eclipse编译后的执行之路,走路许多弯路,看我一一道来. 演示系统的架构 首先 ...