<!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. 利用Qt开发跨平台APP（二）（iOS，使用Qt5.9，很详细，有截图）

    本文将手把手教你如何使用Qt编译出iOS应用程序. Qt是一个优秀的跨平台开发工具.我们利用Qt可以很方便地将一次编写的应用,多次编译到不同平台上,如Windows.Linux.MAC.Android ...

  2. 以太坊geth主网全节点部署

    以太坊geth主网全节点部署 #环境 ubuntu 16.4 #硬盘500GB(目前占用200G) #客户端安装 # 查看下载页面最新版 # https://ethereum.github.io/go ...

  3. HTTP的常见状态码

    一.1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态码. 100(继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101(切换协议) 请求者 ...

  4. 百度领跑BAT all in O2O机遇大于挑战

        近期一年O2O可谓是互联网领域最"炙手可热"的话题,似乎是个创业项目都要和O2O沾点关系.所以我们看到各种细分O2O模式层出不穷,并且,似乎外卖.洗车.租房等传统服务已经通 ...

  5. [RGEOS]数学基础

    1.向量Vector3d using System; namespace RGeos.Geometry { /// <summary> /// 3D向量类 /// </summary ...

  6. Flask系列(二)Flask基础

    知识点回顾 1.flask依赖wsgi,实现wsgi的模块:wsgiref(django),werkzeug(flask),uwsgi(上线) 2.实例化Flask对象,里面是有参数的 app = F ...

  7. mysql数据库表的查询操作-总结

    转自:https://www.cnblogs.com/whgk/p/6149009.html 序言 1.MySQL表操作(创建表,查询表结构,更改表字段等), 2.MySQL的数据类型(CHAR.VA ...

  8. cocos-lua基础学习（九）spite类学习笔记

    创建精灵 ,) ) layer:addChild( sprite ) ) layer:addChild(BatchNode, , kTagSpriteBatchNode) ,) ) layer:add ...

  9. WebService-WSDL简单介绍

    一.什么是WSDL 网络服务描述语言(Web Services Description Language)简称WSDL.作用是通过接口之间的调用实现数据的传输.由于WSDL是基于XML格式的,所以它可 ...

  10. netty4.1.6源码2-------创建服务端的channel

    1. netty在哪里调用jdk底层的socket去创建netty服务端的socket. 2. 在哪里accept连接. 服务端的启动: 1. 调用jdk底层的api去创建jdk的服务端的channe ...