过渡效果

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

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

    <style type="text/css">

        .fade-enter-active, .fade-leave-active {

          transition: opacity .5s

        }

        .fade-enter, .fade-leave-active {

           opacity: 0

        }

    </style>

</head>

<body>

    <div id="box">

        <input type="button" value="按钮" @click="toggle">

        <transition name="fade">

            <div id="div1" v-if="isShow" transiton="fade">11111</div>

        </transition>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:'#box',

            data:{

                isShow:false

            },

            methods:{

                toggle:function(){

                    this.isShow = !this.isShow;

                }

            }

        });

    </script>

</body>

</html>

一开始不显示，点击后显示 有一个css的过渡方式

官方：https://vuefe.cn/v2/guide/transitions.htm

Vue2学习笔记:过渡效果css的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. 前端学习：学习笔记（CSS部分）

    前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...

  3. Webpack4 学习笔记二 CSS模块转换

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...

  4. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  5. 前端新人学习笔记-------html/css/js基础知识点

    即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日 ...

  6. 前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...

  7. Vue2 学习笔记1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  8. 前端学习笔记之CSS过渡模块

    阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...

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

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

随机推荐

  1. pointer-events/H5页面在iphone6 plus的微信上出现闪退

    一.pointer-events 1.元素加上pointer-events:none后,在js中加点击事件不好使 原因:pointer-events:none关闭所有点击事件,包括js总的 解决:删掉 ...

  2. css 设置滚动条的样式

    /*移动端显示滚动条*/ .layui-table-body::-webkit-scrollbar { -webkit-appearance: none; } .layui-table-body::- ...

  3. java获得当前日期是今年的第几周，以及这周的开始日期的方法

    直接上代码,备份使用         时间戳,长整型存储             long startTime1 = 1530613938532l;             Calendar cale ...

  4. Nodejs学习笔记（十三）—PM2

    简介 PM2 pm2是一个内置负载均衡的node.js应用进程管理器(也支持Windows),其它的类似功能也有不少,但是感觉pm2功能更强,更值的推荐 GitHub地址:https://github ...

  5. linux tar 命令

    tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件! ...

  6. jQuery.on() 函数

    1.绑定所有的<p>元素// 为所有P元素分别绑定click事件处理函数handler$("p").on("click", handler); 2. ...

  7. [HNOI 2018]转盘

    Description 题库链接 在一个环上有 \(n\) 个物品,第 \(i\) 个物品的出现时间为 \(T_i\) .一开始你可以任意选择一个物品的位置作为起始位置,然后以这个位置为起点沿正方向走 ...

  8. 【转】SQL SERVER 日期格式化

    0   或   100   (*)     默认值   mon   dd   yyyy   hh:miAM(或   PM)       1   101   美国   mm/dd/yyyy       ...

  9. unity 中 Tilemap的使用 笔记

    Coordinate 坐标 创建顺序: Sprite Palette(调色板) Tile Brush Tilemap(瓦片地图) 1.创建画板:保存路径:Palettes/Basic/BasicGro ...

  10. EF6 CodeFirst代码迁移笔记

        由于EF7只支持codefirst only.朕无奈被微软逼上了梁山学一下codefirst,就算是为明年做准备吧.写的这些网上大致都有,基本没啥 新内容, 迁移 使用自动迁移 Enable- ...