Vue.js中的transition确实很棒。毫无疑问,它们可以非常轻松地让应用程序栩栩如生,但是通常必须在每个项目中从头开始编写它们,甚至还需要引入animate.css之类的CSS库来使它们功能更强大。
如果我们可以将它们封装到组件中,并在多个项目中简单地重用它们,结果会怎样呢"text-align: center">
原始transition组件和CSS
定义transition的最简单方法是使用transition·或transition-group组件。这需要为transition定义一个name`和一些CSS。
<template> <div id="app"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> </template> <script> export default { name: "App", data() { return { show: true }; } }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
看起来容易,对吧"color: #ff0000">封装transition组件
如果我们将前面的逻辑封装到一个组件中,并将其用作一个组件,结果会怎样呢"htmlcode">
// FadeTransition.vue <template> <transition name="fade"> <slot></slot> </transition> </template> <script> export default { }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> // App.vue <template> <div id="app"> <button v-on:click="show = !show"> Toggle transition </button> <fade-transition> <div v-if="show" class="box"></div> </fade-transition> </div> </template> <script>...</script> <style>...</style>
通过在transition组件中提供一个slot,我们几乎可以像使用基本transition组件一样使用它。这比前面的例子稍微好一点,但是如果我们想要传递其他特定于transition的prop,比如mode或者一些hook,该怎么办呢
封装的包装器transition组件
幸运的是,Vue 中有一个功能,使我们可以将用户指定的所有额外props和监听器传递给我们的内部标签/组件。如果你还不知道,则可以通过$attrs访问额外传递的 props,并将它们与v-bind结合使用以将它们绑定为props。这同样适用于通过$listeners进行的事件,并通过v-on对其进行应用。
// FadeTransition.vue <template> <transition name="fade" v-bind="$attrs" v-on="$listeners"> <slot></slot> </transition> </template> <script> export default {}; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> // App.vue ... <fade-transition mode="out-in"> <div key="blue" v-if="show" class="box"></div> <div key="red" v-else class="red-box"></div> </fade-transition> ...
「完整事例地址:https://codesandbox.io/s/yjl1wjyoy1"color: #ff0000">显式持续时间 prop
Vue 为transition组件提供了一个duration prop,然而,它是为更复杂的动画链接而设计的,它帮助 Vue 正确地将它们链接在一起。
在我们的案例中,我们真正需要的是通过组件prop控制CSS animation/transition。我们可以通过不在CSS中指定显式的CSS动画持续时间,而是将其作为样式来实现。我们可以借助transition hook来做到这一点,该transition hook与组件生命周期 hook 非常相似,但是它们在过渡所需元素之前和之后被调用。让我们看看效果如何。
// FadeTransition.vue <template> <transition name="fade" enter-active-class="fadeIn" leave-active-class="fadeOut" v-bind="$attrs" v-on="hooks"> <slot></slot> </transition> </template> <script> export default { props: { duration: { type: Number, default: 300 } }, computed: { hooks() { return { beforeEnter: this.setDuration, afterEnter: this.cleanUpDuration, beforeLeave: this.setDuration, afterLeave: this.cleanUpDuration, ...this.$listeners }; } }, methods: { setDuration(el) { el.style.animationDuration = `${this.duration}ms`; }, cleanUpDuration(el) { el.style.animationDuration = ""; } } }; </script> <style> @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } </style>
「完整事例地址:https://codesandbox.io/s/j4qnjvmwz9"color: #ff0000">Transition group 支持
你想到的最直接的方法可能是创建一个新组件,比如fade-transition-group,然后将当前transition标签替换为transition-group标签,以实现 group transition。如果我们可以在相同的组件中这样做,并公开一个将切换到transition-group实现的group prop,那会怎么样呢"htmlcode">
// FadeTransition.vue <template> <component :is="type" :tag="tag" enter-active-class="fadeIn" leave-active-class="fadeOut" move-class="fade-move" v-bind="$attrs" v-on="hooks"> <slot></slot> </component> </template> <script> export default { props: { duration: { type: Number, default: 300 }, group: { type: Boolean, default: false }, tag: { type: String, default: "div" } }, computed: { type() { return this.group "transition-group" : "transition"; }, hooks() { return { beforeEnter: this.setDuration, afterEnter: this.cleanUpDuration, beforeLeave: this.setDuration, afterLeave: this.cleanUpDuration, leave: this.setAbsolutePosition, ...this.$listeners }; } }, methods: { setDuration(el) { el.style.animationDuration = `${this.duration}ms`; }, cleanUpDuration(el) { el.style.animationDuration = ""; }, setAbsolutePosition(el) { if (this.group) { el.style.position = "absolute"; } } } }; </script> <style> @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } .fade-move { transition: transform 0.3s ease-out; } </style> // App.vue ... <div class="box-wrapper"> <fade-transition group :duration="300"> <div class="box" v-for="(item, index) in list" @click="remove(index)" :key="item" > </div> </fade-transition> </div> ...
「完整事例地址:https://codesandbox.io/s/pk9r5j2257"color: #ff0000">Vue Transition
在此之前描述的所有内容基本上都是这个小型 [transition 集合][7]所包含的内容。它有 10 个封装的transition组件,每个约1kb(缩小)。我认为它非常方便,可以轻松地在不同的项目中使用。你可以试一试:)
总结
我们从一个基本的过渡示例开始,并最终通过可调整的持续时间和transition-group支持来创建可重用的过渡组件。我们可以使用这些技巧根据并根据自身的需求创建自己的过渡组件。希望读者从本文中学到了一些知识,并且可以帮助你们建立功能更好的过渡组件。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]