本文主要是介绍Vue transition使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
// 单元素、单组件 出场 入场 动画
// 入场：从隐藏态到显示
// 出场：从显示态到隐藏
<style>/*过渡 动画的封装*//* 入场*//*开始*/.v-enter-from {opacity: 0;}/*整个过程怎么执行*/.v-enter-active {transition: opacity 3s ease-out;}/*结束*/.v-enter-to {opacity: 1;}/* 出场*/.v-leave-from {opacity: 1;}/*整个过程怎么执行*/.v-leave-active {transition: opacity 3s ease-in;}.v-leave-to {opacity: 0;}</style>
<body><div id="root"></div>
</body>
<script>// 单元素 单组件 出场 入场 动画
// 入场：从隐藏态到显示
// 出场：从显示态到隐藏// 创建 vue实例const app = Vue.createApp({data() {return {show: false}},methods:{handleClick() {this.show = !this.show}},template: `<div><transition><div v-if="show">hello world!</div></transition><button @click="handleClick">切换</button></div>`});const vm = app.mount('#root');</script>
这篇关于Vue transition使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
