直接上代码：

<!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. 第十八个知识点：画一个描述ECB,CBC,CTR模式的操作

    第十八个知识点:画一个描述ECB,CBC,CTR模式的操作 第8周是画三个图的任务,但是维基百科上已经有人画的很好了 https://en.wikipedia.org/wiki/File:ECB_en ...

  2. HITCON 2019 Lost Modular again writeup

    HITCON 2019 Lost Modular again writeup 算是基础题,有很多之前题的影子,做不出来纯属菜. 题目 加密脚本 from Crypto.Util.number impo ...

  3. 浅谈MemoryCache的原生插值方式

    .NET运行时内置了常用的缓存模块: MemoryCache 标准的MemoryCache暴露了如下几个属性和方法: public int Count { get; } public void Com ...

  4. 应用TYPE-C外围电源管理IC IM2605

    应用于TYPE-C外围集成同步4开关Buck-Boost变换器的电源管理IC   IM2605 IM2605描述 IM2605集成了一个同步4开关Buck-Boost变换器,在输入电压小于或大于输出电 ...

  5. CS5265 demoboard|CS5265测试板电路参考|CS5265 Typec转HDMI 4K60HZ方案

    CS5265是TYPEC转HDMI2.0音视频转换芯片,CS5265符合DP1.4协议,且输出的视频信号是HDMI2.0 即4K60HZ  CS5265集成了DP1.4兼容接收机和HDMI2.0b兼容 ...

  6. 图像数据到网格数据-2——改进的SMC算法的实现

    概要 本篇接上一篇继续介绍网格生成算法,同时不少内容继承自上篇.上篇介绍了经典的三维图像网格生成算法MarchingCubes,并且基于其思想和三角形表实现了对样例数据的网格构建.本篇继续探讨网格生成 ...

  7. 《selenium2 python自动化测试》（高清）.PDF，免费无需任何解压密码

    链接:https://pan.baidu.com/s/1eAI0mXvJeblBn2Tn9WClEA 提取码:7m5u

  8. 779. 第K个语法符号

    <找规律> <递归> 题目描述 在第一行我们写上一个 0.接下来的每一行,将前一行中的0替换为01,1替换为10. 给定行数 N 和序数 K,返回第 N 行中第 K个字符.(K ...

  9. react中label标签的作用

    当我们点击输入内容触发input焦点的时候,就需要使用到label标签里的htmlFor属性来扩大点击的区域 代码如下:

  10. Java实现163邮箱发送邮件到QQ邮箱

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6812973124141711876/ 先创建一个maven的普通项目 添加依赖,附在文档末尾 其中几个注意的地方 ...