小程序制作工具_在Vue中创建可重用的 Transition的方法

  • 栏目:公司新闻 时间:2021-01-05 13:43 分享新闻到:
<返回列表

在Vue中创建可重用的 Transition的方法       这篇文章主要介绍了在Vue中创建可重用的 Transition,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

Vue.js中的transition确实很棒。毫无疑问,它们可以非常轻松地让应用程序栩栩如生,但是通常必须在每个项目中从头开始编写它们,甚至还需要引入animate.css之类的CSS库来使它们功能更强大。

如果我们可以将它们封装到组件中,并在多个项目中简单地重用它们,结果会怎样呢 我们将介绍几种定义transition的方法,并深入研究如何使它们真正可重用。

原始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 

看起来容易,对吧 然而,这种方法有一个问题。我们不能在另一个项目中真正重用这个transition。

封装transition组件

如果我们将前面的逻辑封装到一个组件中,并将其用作一个组件,结果会怎样呢

// 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" /div 
 /fade-transition 
 /div 
 /template 
 script ... /script 
 style ... /style 

通过在transition组件中提供一个slot,我们几乎可以像使用基本transition组件一样使用它。这比前面的例子稍微好一点,但是如果我们想要传递其他特定于transition的prop,比如mode或者一些hook,该怎么办呢

封装的包装器transition组件

幸运的是,Vue 中有一个功能,使我们可以将用户指定的所有额外pro凡科抠图和监听器传递给我们的内部标签/组件。如果你还不知道,则可以通过$attrs访问额外传递的 pro凡科抠图,并将它们与v-bind结合使用以将它们绑定为pro凡科抠图。这同样适用于通过$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" /div 
 div key="red" v-else /div 
 /fade-transition 

现在,我们可以传递普通transition组件可以接受的任何事件和支持,这使得我们的组件更加可重用。但为什么不更进一步,增加通过 prop 轻松定制持续时间的可能性。

显式持续时间 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- 
 leave-active- 
 v-bind="$attrs" 
 v-on="hooks" 
 slot /slot 
 /transition 
 /template 
 script 
export default { 
 pro凡科抠图: { 
 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 

现在,我们可以控制实际的可见过渡时间,这使我们可重用的过渡变得灵活且易于使用。但是,如何过渡多个元素(如列表项)呢

Transition group 支持

你想到的最直接的方法可能是创建一个新组件,比如fade-transition-group,然后将当前transition标签替换为transition-group标签,以实现 group transition。如果我们可以在相同的组件中这样做,并公开一个将切换到transition-group实现的group prop,那会怎么样呢 ponent和is属性来实现这一点。

// FadeTransition.vue 
 template 
 component :is="type" 
 :tag="tag" 
 enter-active- 
 leave-active- 
 move- 
 v-bind="$attrs" 
 v-on="hooks" 
 slot /slot 
 /component 
 /template 
 script 
export default { 
 pro凡科抠图: { 
 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 
 fade-transition group :duration="300" 
 div 
 v-for="(item, index) in list" 
 @click="remove(index)" 
 :key="item" 
 /div 
 /fade-transition 
 /div 
... 

[文档中][6]介绍了一个带有transition-group元素的警告。我们基本上必须在元素离开时将每个项目的定位设置为absolute,以实现其他项目的平滑移动动画。我们也必须添加一个move-class并手动指定过渡持续时间,因为没有用于移动的 JS hook。我们将这些调整添加到我们的上一个示例中。

再做一些调整,通过在mixin中提取 JS 逻辑,我们可以将其应用于轻松创建新的transition组件,只需将其放入下一个项目中即可。

Vue Transition

在此之前描述的所有内容基本上都是这个小型 [transition 集合][7]所包含的内容。它有 10 个封装的transition组件,每个约1kb(缩小)。我认为它非常方便,可以轻松地在不同的项目中使用。你可以试一试:)

总结

我们从一个基本的过渡示例开始,并最终通过可调整的持续时间和transition-group支持来创建可重用的过渡组件。我们可以使用这些技巧根据并根据自身的需求创建自己的过渡组件。希望读者从本文中学到了一些知识,并且可以帮助你们建立功能更好的过渡组件。

到此这篇关于在Vue中创建可重用的 Transition的方法的文章就介绍到这了,更多相关vue创建Transition内容请搜索凡科以前的文章或继续浏览下面的

分享新闻到:

更多阅读

小程序制作工具_在Vue中创建可重用的 T

公司新闻 2021-01-05
在Vue中建立可多次用的 Transition的方式 本文关键详细介绍了在Vue中建立可多次用的 Tran...
查看全文

广州凡科互联网科技股份有限公司招聘短

公司新闻 2021-01-05
招聘人数:14职位信息1、 负责短视频拍摄及后期剪辑工作;2、 参与公司产品及其它短视频平...
查看全文

衡水企业网站建设价钱-九江市企业网站建

公司新闻 2021-01-04
找非当地的建网站企业建立网站可靠吗?不管是九江市企业网站建设企业還是非当地企业网站...
查看全文
返回全部新闻


区域站点: 南丰县建站培训   南宫市建站程序   囊谦县凡科建站   南和县企业建站   南华县建站培训   南江县建站程序   南京市凡科建站   南靖县企业建站   南康市建站培训   南乐县建站程序   南陵县凡科建站   南宁市企业建站   南平市建站培训   南皮县建站程序   南市区凡科建站   南通市企业建站   南投县建站培训   南雄市建站程序   南溪县凡科建站   南阳市企业建站   南漳县建站培训   南召县建站程序   南郑县凡科建站   那坡县企业建站   那曲县建站培训   纳雍县建站程序   讷河市凡科建站   内黄县企业建站   内江市建站培训   内丘县建站程序   内乡县凡科建站   嫩江市企业建站   聂荣县建站培训   尼玛县建站程序   尼木县凡科建站   宁安市企业建站   宁波市建站培训   宁城县建站程序   宁德市凡科建站   宁都县企业建站   宁国市建站培训   宁海县建站程序   宁化县凡科建站   宁晋县企业建站   宁陵县建站培训   宁明县建站程序   宁南县凡科建站   宁强县企业建站   宁陕县建站培训   宁武县建站程序   宁乡市凡科建站   宁阳县企业建站   宁远县建站培训   农安县建站程序   磐安县凡科建站   盘锦市企业建站   盘山县建站培训   磐石市建站程序   盘州市凡科建站   蓬安县企业建站   澎湖县建站培训   蓬莱市建站程序   彭山县凡科建站   蓬溪县企业建站   彭阳县建站培训   彭泽县建站程序   彭州市凡科建站   偏关县企业建站   平安县建站培训   平昌县建站程序   平定县凡科建站   屏东县企业建站   平度市建站培训   平果县建站程序   平和县凡科建站   平湖市企业建站   平江县建站培训   平乐县建站程序   平凉市凡科建站   平利县企业建站   平罗县建站培训   平陆县建站程序   屏南县凡科建站   平泉市企业建站   屏山县建站培训   平顺县建站程序   平塘县凡科建站   平潭县企业建站   平武县建站培训   萍乡市建站程序   平乡县凡科建站   平阳县企业建站   平遥县建站培训   平阴县建站程序   平邑县凡科建站   平远县企业建站   平舆县建站培训   皮山县建站程序   普安县凡科建站   浦北县企业建站   浦城县建站培训   普洱市建站程序   普格县凡科建站   浦江县企业建站   普兰县建站培训   普宁市建站程序   莆田市凡科建站   迁安市企业建站   乾安县建站培训   潜江市建站程序   潜山市凡科建站  

友情链接: 医慧互通 创建网站教程 巴渝烤哥 美国免费建站平台 免费网页建站 免费自助建站

Copyright © 2002-2020 凡科建站_企业建站_建站培训_建站程序_自建网站 版权所有 (网站地图) 备案号:粤ICP备10235580号