直接上代码：

<!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. 【HTML基础习题】HTML5+CSS3做问卷星登录页面

    源代码下载地址:https://download.csdn.net/download/weixin_44893902/12839539 码云仓库地址: https://gitee.com/ynavc/ ...

  2. mongodb Windows系统下安装卡死问题

    1.操作环境 MongoBD版本:mongodb-win32-x86_64-2008plus-ssl-4.0.5-signed (4.0.5) 操作系统:Windows 2008 R2_64位 (服务 ...

  3. 论文翻译：2020_Attention Wave-U-Net for Acoustic Echo Cancellation

    论文地址:http://www.interspeech2020.org/uploadfile/pdf/Thu-1-10-10.pdf Attention Wave-U-Net 的回声消除 摘要 提出了 ...

  4. CSS基础 元素整体透明效果（包含内容+背景及子元素）

    属性名:opacity:数字+px; 数字值取值0-1之间数字 数字值:1表示完全不透明 0表示完全透明使用后效果 html结构代码 <div class="box"> ...

  5. CSS基础 装饰 元素本身隐藏和显示效果及案例

    1.visibility:hidden; 2.display: none: 区别: 1.visibility:hidden 隐藏元素本身,且在网页中 占位置 2.display:none; 隐藏元素本 ...

  6. 使用用支付宝时，返回的数据中subject为中文时验签失败

    解决方法为: 来自为知笔记(Wiz)

  7. 谈谈 StringBuffer 和 StringBuilder 的历史故事

    1.前言 众所周知,StringBuffer 是线程安全的 ,而StringBuilder 不是线程安全的  ,但是 StringBuilder 速度会更快. 事实上 作为一个字符串拼接 方法 ,在线 ...

  8. STC8H开发(四): FwLib_STC8 封装库的介绍和注意事项

    目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...

  9. k8s中初始化容器（init container）的作用及其使用方法

    概述 在容器的部署过程中,有的时候需要在容器运行之前进行一些预配置的工作,比如下载配置,判断某些服务是否启动,修改配置等一些准备的工作,想要实现这些功能,在k8s中可以使用初始化容器,在应用容器运行之 ...

  10. Java中的常用类——Arrays

    数组工具类java.util.Arrays Arrays类中的方法都是static修饰的静态方法,因此可以直接使用类名.方法名来调用,而不用通过new使用对象来调用(是"不用"不是 ...