<!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. 如何在多个LinearLayout中添加分隔线

      1.可以放置一个ImageView组件,然后将其设为分隔线的颜色或图形.分隔线View的定义代码如下:   2.在Android3.0及以上版本,LinearLayout支持直接显示分隔线. an ...

  2. 概率图模型PFM——无向图

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdYAAAFPCAIAAAB/EXiGAAAgAElEQVR4nO2df4wl1XXn6/+0VuG/II ...

  3. 使WebDev.WebServer.exe 当web服务器

    Vs自带的Visual Studio Development_server非常好用.比XP的IIS强多了. XP的IIS经常报访问数过多. 但是, WebDev.WebServer.exe 有个限制就 ...

  4. [golang note] 网络编程 - RPC编程

    net包 • 官方文档 http://godoc.golangtc.com/pkg/net/ Package net provides a portable interface for network ...

  5. linux更改文件或目录的属主和属组

    chown  1.效用  更改一个或者多个文件或者目录的属主以及属组,使用职权范围是超等用户  2.格局  chown [选项] 用户或者组 文件  3.首要参量  --dereference:受影响 ...

  6. oracle连接数据库报错：ORA-01034: ORACLE not available（Oracle 不存在），ORA-27101: shared memory realm does not exist

    花一天半的时间解决客户端连接服务端的oracle数据库,无法连接问题.ORA-01034: ORACLE not available(Oracle 不存在),ORA-27101: shared mem ...

  7. ruby中的预定义变量(Predifined Variables)

  8. 15信号sigaction

    信号处理 信号值小于 SIGRTMIN 的信号 (1~31) 都是不可靠信号 某些unix版本中,调用信号函数处理后会自动恢复默认信号处理,所以在信号处理函数中还需要继续调用signal函数设置信号处 ...

  9. JavaScript中常用的事件

    .onclick事件 点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用区 ...

  10. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...