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项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, ...
随机推荐
- 5天2亿活跃用户，QQ“LBS+AR”天降红包活动后台揭密
作者:Dovejbwang,腾讯后台开发工程师,参与“LBS+AR”天降红包项目,其所在“2016春节红包联合项目团队”获得2016公司级业务突破奖. 商业转载请联系腾讯WeTest获得授权,非商业转 ...
- java继承（一）
虽然说java中的面向对象的概念不多,但是具体的细节还是值得大家学习研究,java中的继承实际上就是子类拥有父类所有的内容(除私有信息外),并对其进行扩展.下面是我的笔记,主要包含以下一些内容点: 构 ...
- DevExpress 控件使用之GridControl基本属性设置
DEV控件:gridControl常用属性设置 1.隐藏最上面的GroupPanel(实现方法两种) ①代码实现:gridView1.OptionsView.ShowGroupPane ...
- NoSql研究报告
NoSql研究报告 1.概述 随着互联网的不断发展,信息系统的数据变得越来越多,关系型数据库逐渐面临着难以克服的障碍,主要体现在: 对数据库的高并发读写需求 对海量数据的高效率存储和访问需求 对数据库 ...
- 浅析NopCommerce的多语言方案
前言 这段时间在研究多语言的实现,就找了NopCommerce这个开源项目来研究了一下,并把自己对这个项目的粗浅认识与大家分享一下. 挺碰巧的是昨天收到了NopCommerce 3.90 发布测试版的 ...
- HttpRequest获取文件流,HttpResponse输出文件流
HttpResponse输出文件: Response.Clear(); Response.ContentType = "application/octet-stream"; //通 ...
- [bzoj3196]Tyvj 1730 二逼平衡树——线段树套平衡树
题目 Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排名 2.查询区间内排名为k的值 3.修改某一位值上的数值 4.查 ...
- 循环神经网络(RNN)模型与前向反向传播算法
在前面我们讲到了DNN,以及DNN的特例CNN的模型和前向反向传播算法,这些算法都是前向反馈的,模型的输出和模型本身没有关联关系.今天我们就讨论另一类输出和模型间有反馈的神经网络:循环神经网络(Rec ...
- Debian安装Oracle Java步骤
在Debian下安装OpenJDK使用apt命令非常方便的安装,但安装Oracle就需要手动了,这里需了解ln和update-alternatvies命令. ln链接 首先我们来说说linux的链接, ...
- Java并发之需要了解但不能太依赖的东东
<Java 编程思想>在并发一章中提到了Sleep休眠.优先级.后台线程,提醒读者需要了解但又不能太依赖他们.就让我们一起看看吧. 休眠Sleep import java.util.con ...