1、示例代码
(注:写到vue单文件中了)
<template> <p> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </p> </template> <script> export default { data: function() { return { show: true } } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 } </style>
2、说明
(1)需要transition 标签包裹。
(2)6个class状态
(3)效果:
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上就是在Vue中如何实现进入/离开动画的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论