Transition组件

在vue中，显示隐藏或者创建移除一个元素或者一个组件的时候，可以通过transition实现动画。

进入（显示，创建）
- v-enter 进入前（vue3.0 v-enter-from）
- v-enter-active 进入中
- v-enter-to 进入后
离开（隐藏，移除）
- v-leave 进入前（vue3.0 v-leave-from）
- v-leave-active 进入中
- v-leave-to 进入后

多个transition使用不同动画，可以添加nam属性，name属性的值替换v即可。

下面是有一个Vue3的例子，可以供大家学习参考

<template><div class="page-home">  <button @click="show=true">显示</button><button @click="show=false">隐藏</button><Transition name="fade"><div v-show="show" style="width:100px;height:100px;background:red"></div></Transition></div>
</template>
<script>
import {ref} from 'vue'
export default {name: 'PageHome',setup(){const show=ref(true);return {show}}
}
</script>
<style  lang="less">
.fade-enter-from{opacity: 0;
}
.fade-enter-active{transition: all 2s;
}
.fade-enter-to{opacity: 1;
}
.fade-leave-from{opacity: 1;
}
.fade-leave-active{transition: all 2s;
}
.fade-leave-to{opacity: 0;
}
</style>

效果是点击显示和隐藏都会有一个2秒的过渡效果

Transition组件相关推荐

【vue2.0进阶篇】用transition组件轻松实现过渡效果
Vue系列连载又继续了,公众号和微信号都接到了伙伴们的催更,最近忙于工作,没来得及时更新<Vue2.0进阶>的教程文章,大家久等了. 这一节我们来学习如何利用Vue提供的transitio ...
vue的transition组件的使用
主要实现的是页面跳转的时候一个页面从左边出去,一个页面从右边进来,通过css3实现的,可以自己自行修改 html代码 <template><div id="app" ...
vue2.0中transition组件的用法
作用:实现元素进入/离开的过渡效果. 首先,让我们举个栗子: <!DOCTYPE html> <html lang="en"><head>< ...
Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
Scss、elementUI引入、transition动画 - 学习笔记
文章目录 Scss.elementUI引入.transition动画 - 学习笔记 Sass 是什么? elementUI transition动画 Scss.elementUI引入.transiti ...
vue transition
Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...
Vue学习笔记进阶篇——多元素及多组件过渡
本文为转载,原文:Vue学习笔记进阶篇--多元素及多组件过渡多元素的过渡对于原生标签可以使用 v-if/v-else.但是有一点需要注意: 当有相同标签名的元素切换时,需要通过 key 特性设置唯 ...
解决 Component inside ＜Transition＞ renders non-element root node that cannot be animated 问题
问题现象今天在用Arco的组件库的时候遇到一个问题: 在route路由中引入一个页面 component: () => import('@/views/demands/demand-list/ ...
vue组件封装: vue-popper+FloatManager
文章目录前言效果展示正文 FloatManager vue-Popper attributes slots events 对vue-popper进一步封装 html js css 过渡写在最后 ...

Transition组件

Transition组件相关推荐

最新文章

热门文章