vue组件中使用<transition></transition>标签过渡动画
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!--2. 自定义两组样式，来控制transition 内部的元素实现动画-->
<style>
/*v-enter 是进入之前，元素的起始状态*/
/*v-leave-to 离开之后动画的终止状态*/
.v-enter,.v-leave-to{
opacity: 0;/*透明度*/
transform: translateX(150px);
}
/*入场(离场)动画的时间段 */
.v-enter-active,.v-leave-active{
transition: all 0.8s ease; } .my-enter,.my-leave-to{
opacity: 0;/*透明度*/
transform: translateY(70px);
}
.my-enter-active,.my-leave-active{
transition: all 0.8s ease; }
</style>
</head>
<body> <div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<input type="button" value="toggle2" @click="flag2=!flag2"> <!--1. 使用transition元素把需要被动画控制的元素，包裹起来-->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition> <transition name="my"> <!--区分不同组织间动画-->
<h6 v-if="flag2">这是一个H6</h6>
</transition>
</div> <script>
var vm = new Vue({
el : '#app',
data : {
flag : false,
flag2 : false,
},
methods : { },
}); </script>
</body>
</html>
vue组件中使用<transition></transition>标签过渡动画的更多相关文章
- vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
- 第七十三篇：解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- vue 组件中this指向
今天开始学习慕课网的“去哪网”app开发,之前用学了一段时间对vue还是没有深刻理解透,先在开始要从新开始学习vue,今天学的第一堂课是vue 中v-model.v-for的简单例子,以前改变dom中 ...
随机推荐
- 浏览器Cookie无法删除问题
1.写Cookie时添加路径: //写cookies,设置过期时间为30天,并设置path为根目录 function setPathCookie(name,value) { var Days = 30 ...
- DeepFool: a simple and accurate method to fool deep neural networks
目录 概 主要内容 二分类模型 为线性 为一般二分类 多分类问题 仿射 为一般多分类 Moosavidezfooli S, Fawzi A, Frossard P, et al. DeepFool: ...
- 比例阀驱动电路后级PWM滤波尖刺如何消除？PWM通过RC低通滤波器模拟DAC
双头比例阀驱动电路,采用单片机输出2路PWM,分别驱动功率器件(U100的2和4脚),经过U100的8和10脚输出供电电源的高压PWM波形,这个高压PWM经过R104和R114分别采样后经过电流放大器 ...
- 使用.NET 6开发TodoList应用(19)——处理OPTION和HEAD请求
系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在HTTP请求中,我们还剩下两类不常使用的请求没有讲到,本文就来实现以下关于OPTIONS和HEAD请求.OPTIONS请求用 ...
- 初识python 之 MongoDB 基本操作
MongoDB与SQL对比: MongoDB 三元素:数据库.集合.文档 MongoDB 基本操作命令: db 查看当前数据库 show dbs 查看所有数据库 use 数据库名 切换数据库,如果数据 ...
- JMeter_csv文件参数化
CSV Data Set Config 可以从指定的文件中一行一行的提取文本内容,每行的数据通过分隔符拆解,并与变量名一一对应,就可以供取样器引用了. 所以在配置数据时,我们需要把参数化的数据进行分行 ...
- Win10+Java7环境配置
原文链接: https://www.toutiao.com/i6487838676326810125/ 安装包: jdk-7u79-windows-x64-20151024 打开安装目录 双击运行程序 ...
- Windows 10 安装 Git 与初次运行前的配置
Windows 10 安装 Git 与初次运行前的配置 在 Windows 上安装 初次运行 Git 前的配置 用户信息 文本编辑器 检查配置信息 获取 Git 仓库 在现有目录中初始化仓库 克隆现有 ...
- docker创建mysql容器时挂载文件路径后无法启动(已解决)
系统centos7 docker版本: 解决方法: 在docker run中加入 --privileged=true 给容器加上特定权限,如下 docker run --privileged=tru ...
- 理解ASP.NET Core - 基于Cookie的身份认证(Authentication)
注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 概述 通常,身份认证(Authentication)和授权(Authorization)都会放 ...