<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css过渡动作实例：</title>

    <script src="vue.js"></script>

</head>

<body>

<!--

    隐藏和显示的动作：

    v-enter:

    v-enter-active

    v-enter-to

    v-leave:

    v-leave-active:

    v-leave-to:

-->

<div id="hdcms">

    <button @click="type=!type">显示/隐藏</button>

    <transition name="hd">

        <h1 v-if="type">http://www.baidu.com百度一下就知道</h1>

    </transition>

</div>

<script>

    new Vue({

        el: "#hdcms",

        data:{

            type:false

        }

    });

</script>

<style>

    .hd-enter,.hd-leave{

        opacity: 0;

    }

    .hd-enter-to{

    }

    .hd-enter-active{

        transition:all 3s;

        color: red;

    }

    .hd-leave-active{

        transition: all 3s;

        color: green;

    }

</style>

</body>

</html>

　　

047——VUE中css过渡动作实例的更多相关文章

  1. Vue中CSS模块化最佳实践

    Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...

  2. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  3. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

  4. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...

  5. 在vue中同时使用过渡和动画

    在上次的动画中,在显示和隐藏有动画效果,但是,刷新页面的时候,第一次的显示没有动画效果 需求:刷新页面的时候也有动画效果 <transition name='fade' appear enter ...

  6. Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )

    scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...

  7. vue中js获取组件实例

    获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法. <template> </template> <script> // 声明变量currVM let ...

  8. Vue中封装axios组件实例

    首先要创建一个网络模块network文件夹  里面要写封装好的几个组件 在config.js里面这样写 在index.js要这样写 core.js文件里面内容如下 然后要在main.js文件里面要设置 ...

  9. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

随机推荐

  1. Java的平台无关性如何体现出来的

    传统的编程中,源代码编译为可执行的代码后,只能针对特定的平台(操作系统),换句话说,针对Windows编写和编译的代码,只能在Windows上运行... java程序则编译为字节码.字节码本身不能运行 ...

  2. jQuery.outerWidth() 函数具体解释

    outerWidth()函数用于设置或返回当前匹配元素的外宽度.外宽度默认包含元素的内边距(padding).边框(border),但不包含外边距(margin)部分的宽度.你也能够指定參数为true ...

  3. linux软件源配置

     实操(虚拟机安装): 下载VMware,然后按照如下教程安装虚拟机: https://jingyan.baidu.com/article/c275f6ba07e269e33d756714.html ...

  4. [C#]嵌入互操作类型

    嵌入互操作类型(Embed Interop Types) 运用office编程调用Excel 的PIA时Microsoft.Office.Interop.Excel.dll时会产生如下问题: 1.提示 ...

  5. 知识点1-树状数组[带poj Stars作为巩固]

    转自:https://blog.csdn.net/flushhip/article/details/79165701#commentBox 1.首先其中讲到了一个问题,就是如何求一个数的二进制表示的最 ...

  6. TeamViewer远程唤醒主机实战教程（多图）

    前言:首先感谢大家来到这里.这篇文章其实算是一个教程,文章中涉及到了TeamViewer,Mac OS X,TP-Link家用路由器,以及花生壳DDNS,对于新手而言内容可能稍微有些多,但我相信按照我 ...

  7. rest-framework框架的基本组件

    快速实例 Quickstart 大致步骤 (1)创建表,数据迁移 (2)创建表序列化类BookSerializer class BookSerializer(serializers.Hyperlink ...

  8. linux内核分析第四周-使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    本周作业的主要内容就是采用gcc嵌入汇编的方式调用system call.系统调用其实就是操作系统提供的服务.我们平时编写的程序,如果仅仅是数值计算,那么所有的过程都是在用户态完成的,但是我们想将变量 ...

  9. Javaworkers团队第一周项目总结

    项目名称:游戏贪吃蛇 项目介绍: 贪吃蛇是一款相当经典的小游戏,我们团队决定用我们现有的java知识来实现它. 具体设计: 对象:蛇.果实 方向键:控制蛇的运动. 空格键:暂停游戏 ESC:推出游戏( ...

  10. 论cudnn与cuda之间的关系，和实际例子测试。

    1.其中cudnn是一个常见的神经网络层加速库文件,其能够很大程度的把加载到显卡上的网络层数据进行优化计算.cuda就像一个傻大粗的加速库,其主要是依靠的是显卡 计算速度跟一些算法的优化,而且其也是进 ...