45 双组件切换动画效果
Posted wgchen~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了45 双组件切换动画效果相关的知识,希望对你有一定的参考价值。
阐述
上节学习了双DOM元素动画过渡效果的实现,这节我们把DOM元素换成组件,看看编写方法上有什么变化。
双组件切换动画
我们先来编写两个组件,这里可以写两个最简单的局部组件。
const XiaoHong =
template: `<div>小红进入了试衣间</div>`
const XiaoLi =
template: `<div>小丽进入了试衣间</div>`
要想使用局部组件,需要先用 components
进行注册,这里换成小写加横线的形式。
components:
'xiao-hong': XiaoHong,
'xiao-li': XiaoLi
,
然后修改模板中的 <transition>
部分,使用局部组件,实现动画。
template: `
<transition mode="out-in" appear>
<xiao-hong v-if="isShow" />
<xiao-li v-else />
</transition>
<button @click="hanldClick">切换动画</button>
`
写完这些,到浏览器中查看一下,可以看到动画效果也是可以成功的。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
.v-enter-from,
.v-leave-to
opacity: 0;
.v-enter-to,
.v-leave-from
opacity: 1;
.v-enter-active,
.v-leave-active
transition: opacity 2s ease-in;
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const XiaoHong =
template: `<div>小红进入了试衣间</div>`
const XiaoLi =
template: `<div>小丽进入了试衣间</div>`
const app = Vue.createApp(
data()
return
component:'xiao-hong'
,
methods:
hanldClick()
this.component = this.component === 'xiao-hong' ? 'xiao-li' : 'xiao-hong'
,
components:
'xiao-hong': XiaoHong,
'xiao-li': XiaoLi
,
template: `
<transition mode="out-in" appear>
<component :is="component" />
</transition>
<button @click="hanldClick">切换动画</button>
`
)
const vm = app.mount("#app")
</script>
</html>
动态组件切换效果
我们还可以使用动态组件的形式进行切换,也就是在业务逻辑层面修改绑定属性,然后在模板中用 :is
来进行绑定。
先声明一个数据项,叫做 component
。
data()
return
component: 'xiao-hong'
,
然后在 handleClick
方法里修改这个组件的绑定,这里可以使用一个三元运算符。
methods:
hanldClick()
this.component = this.component === 'xiao-hong'?'xiao-li':'xiao-hong'
,
最后修改模板中的绑定方式。
<transition mode="out-in" appear>
<component :is="component" />
</transition>
这时候到浏览器中查看效果,仍然可以得到我们想要的效果。
以上是关于45 双组件切换动画效果的主要内容,如果未能解决你的问题,请参考以下文章
Unity -- Animation(旧版动画组件)和Animator(新版动画器组件)