直接上代码:

<!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>标签过渡动画的更多相关文章

  1. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  2. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  3. 第七十三篇:解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

  4. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  5. vue组件中使用iframe元素

    需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...

  6. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  7. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  8. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  9. vue 组件中this指向

    今天开始学习慕课网的“去哪网”app开发,之前用学了一段时间对vue还是没有深刻理解透,先在开始要从新开始学习vue,今天学的第一堂课是vue 中v-model.v-for的简单例子,以前改变dom中 ...

随机推荐

  1. Codeforces1132A——Regular Bracket Sequence(水题)

    Regular Bracket Sequence time limit per test:1 second memory limit per test:256 megabytes input:stan ...

  2. MySQL 批量插入,如何不插入重复数据

    1.insert ignore into 当插入数据时,如出现错误时,如重复数据,将不返回错误,只以警告形式返回.所以使用ignore请确保语句本身没有问题,否则也会被忽略掉=======>IN ...

  3. Normalization Methods

    目录 概 主要内容 Batch Normalization Layer Normalization Instance Normalization Group Normalization Ioffe S ...

  4. Java初学者作业——定义英雄类(Hero),英雄类中的属性包括:姓名、攻击力、防御力、生命值和魔法值;方法包括:攻击、介绍。

    返回本章节 返回作业目录 需求说明: 定义英雄类(Hero),英雄类中的属性包括:姓名.攻击力.防御力.生命值和魔法值:方法包括:攻击.介绍. 实现思路: 分析类的属性及其变量类型. 分析类的方法及其 ...

  5. Kafka版本介绍Version2.4.0

    1.说明 Kafka的版本从0.11.0.X到1.0.X, 再到2.0.X大版本, 其实没有经过几个版本, 只是版本号变化较大. 2.最新发布版本 截止本文章2020年2月22号发布时, Kafka ...

  6. Windows下安装配置jdk

    1.jdk安装 从官网获取jdk安装包后, 双击图形化安装,一路next即可. 2.配置JavaHome 打开计算机->系统属性->高级系统设置->环境变量 在系统变量下面添JAVA ...

  7. .net core获取本地Ip地址的方法

    笔记: /// <summary> /// 获取本地Ip地址 /// </summary> /// <returns></returns> public ...

  8. C# 使用阿里云发送短信

    最近有个项目,短信服务使用的是阿里云的,由于时间问题,没有手动去构造sign去发送,而是直接使用阿里云的SDK发送,所以这里算是做个笔记,或许以后还能用得到 首先,我们需要安装阿里云的SDK,推荐使用 ...

  9. 初识python: 回调函数

    回调函数 简单理解就是:将一个函数通过参数的形式传递给另一个函数 #!/user/bin env python # author:Simple-Sir # time:2019/8/9 10:49 # ...

  10. java同时替换多个字符串

    参考资料: https://blog.csdn.net/qq_39390545/article/details/106020221 来自为知笔记(Wiz)