特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在Vue中的transition
和animation
都是一些很棒的东东。它们可以让我们的组件带有一定的动效效果。在《Vue的transition
》和《Vue的animation
》中分别学习了transition
和animation
在Vue组件中的运用。这两个特性可以让Web元元素可以像animation.css
库中提供的效果一样,实现一些过渡甚至是简单的动画效果。让整个效果看起来很好。
如果我们可以将它们封装到组件中,并且在多个项目中重用,是不是会给我们带来更多的益处呢?在前面两篇文章中,我们了解了在Vue中怎么使用transition
和animation
,今天我们来学习几种定义transtion
的方法,并且深入研究它们可以真正重用的方法。
创建Vue项目
为了节省大家更多的时间,在这篇文章中咱们直接使用Vue Cli的来构建演示项目:
vue create vue-transitions
因为我们将会涉及多个使用transition
方法,在这里通过相关的分支来区分。
git checkout -b demo1
接下来进入实际的案例中,以来阐述Vue中如何构建可重用的transition
。
示例项目Github对应的地址在这里。
原始的transition
组件和CSS
在《Vue的transition
》一文中,我们了解到,在Vue中定义transition
最简单的方法是使用Vue中的<transition>
和<transition-group>
。这需要为它们定义一个name
和一些CSS。比如:
<!-- transitionDemo.vue -->
<template>
<div class="demo">
<div class="toggle toggle--text">
<input type="checkbox" id="toggle--text" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--text" data-label-on="show" data-label-off="hidden" @click="toggle"></label>
</div>
<transition name="fade">
<p v-if="show">Hello W3cplus (^_^) !!!</p>
</transition>
</div>
</template>
<script>
export default {
name: 'transitionDemo',
data () {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show
}
}
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
/* === 默认样式省略 == */
</style>
点击按钮,你将看到的效果如下:
看起来很容易,对吧?然而,这种方法有一个问题。这个过渡效果不能在另一个项目中重用。
封装一个transition
组件
如果我们将前面逻辑封装成一个Vue组件,将会发生什么情况呢?同样的,把Git分支切换到demo2
中。接着我们创建一个FadeTransition.vue
组件。
<!-- FadeTransition.vue -->
<template>
<transition name="fade">
<slot />
</transition>
</template>
<script>
export default {
name: 'FadeTransition'
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
该组件很简单,和Vue基本的<transition>
几乎类似,不同之处是该组件使用了slot
。在使用FadeTransition
组件时,可以通过slot
传递你想要的内容。比如:
<!-- App.vue -->
<template>
<div id="app">
<div class="toggle toggle--text">
<input type="checkbox" id="toggle--text" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--text" data-label-on="show" data-label-off="hidden" @click="toggle"></label>
</div>
<FadeTransition>
<div class="box" v-if="show"></div>
</FadeTransition>
</div>
</template>
<script>
import FadeTransition from './components/FadeTransition'
export default {
name: 'app',
components: {
FadeTransition
},
data () {
return {
show: true
}
},
methods: {
toggle () {
this.show = !this.show
}
}
}
</script>
这个时候看到的效果如下:
如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-js-reusable-transitions.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!