vue2.0中transition组件的用法

作用：实现元素进入/离开的过渡效果。

首先，让我们举个栗子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css"><style>.toggle-enter-active {transition: all 3s ease;height: 50px;overflow: hidden;}.toggle-leave-active {transition: all 3s ease;height: 0px;overflow: hidden;}.toggle-enter,.toggle-leave {height: 0;opacity: 0;}</style>
</head><body><div id="demo"><button @click="show = !show">点击我</button><transition name="toggle"><p v-if="show">我有一只小毛驴，我从来也不骑~~~</p></transition></div><script src='https://unpkg.com/vue'></script><script>new Vue({el: '#demo',data: {show: false,}})</script>
</body></html>

注意：

transition标签内只能有name一个属性
transition标签内只能有一个子元素（但此子元素内可以包含多个标签）且需要使用v-if或v-show来控制显示隐藏。
transition的name属性规定了类名，例如我定义了name为toggle，则p标签对应的类名为：

toggle-enter 元素被插入时生效，在下一个帧移除

toggle-enter-active 元素被插入时生效，执行完transition/animation后移除

toggle-leave 元素被隐藏时生效，在下一个帧移除

toggle-leave-active 元素被隐藏时生效，执行完transition/animation后移除

转载于:https://www.cnblogs.com/lqw007/p/9577449.html

vue2.0中transition组件的用法相关推荐

vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
vue2.0中的路由传值
vue2.0中的路由传值传参的三种基本用法第一种字符串拼接 //第一步:路由表 src/router/index.js { path: '/user/:userId?', // 传参第一步:在路由 ...
vue2.0中的$router 和 $route的区别
vue2.0中的$router 和 $route的区别最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $rou ...
vue2.0实现分页组件
http://www.php361.com/index.php?c=index&a=view&id=4671 http://www.yanglajiao.com/article/sin ...
vue2.0桌面端框架_Element-UI组件库(Vue2.0桌面端组件库)V2.9.2 免费版
Element-UI组件库(Vue2.0桌面端组件库)是一款很优秀好用的为开发者.设计师和产品经理推出的基于Vue 2.0的桌面端组件库软件.小编带来的这款Element-UI组件库功能强大全面,简单 ...
vue2.0中关于active-class
vue2.0中关于active-class 一.active-class是什么, active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换: 官方文 ...
conv2d的输入_pytorch1.0中torch.nn.Conv2d用法详解
Conv2d的简单使用 torch 包 nn 中 Conv2d 的用法与 tensorflow 中类似,但不完全一样. 在 torch 中,Conv2d 有几个基本的参数,分别是 in_channel ...
Vue2.0中的事件修饰符
Vue2.0中的事件修饰符: 1.prevent:阻止默认事件,原生js里面为event.preventDefault() 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture ...
vue2.0中组建里面套用组件_vue2.0如何嵌套组件
显示子组件数据 {{ msg }} {{ msg }} 在2.0中这样使用浏览器会报错:[Vue warn]: Component template should contain exactly on ...

vue2.0中transition组件的用法

vue2.0中transition组件的用法相关推荐

最新文章

热门文章