【Vue】组件和元素切换动画的实现 | 您所在的位置:网站首页 › vue页面切换动画原理 › 【Vue】组件和元素切换动画的实现 |
之前我们学习了如何使用transition这个标签 来实现一个单元素或者单组件的动画效果。 这节课我再带大家去学习如何用transition这个标签,实现多个单元素或者多个单组件之间的相互切换 这个过程中的动画。 什么意思? 示例代码: 代码解读: 这里面首先有一个hello world,我们再写一个bye world, hello world和bye world 它俩的显示我们通过v-if等于show, v-else来做一个控制, 如果show是true的话展示 hello world,如果show是false的话,展示的就是bye world。 接着我们写了一个handleClick方法: 每次对show进行取反,我们可以看到这个时候transition里面放了两个元素,一个是hello world,一个是bye world, 然后这两个元素是通过show来控制它俩之间的切换的, 点击切换就变成hello world,再点击 变成bye world: 那么实际上这就是两个单元素之间的切换,之前我们第一个元素是 hello world元素,第二个元素是bye world元素,它俩之间要做一个单元素的切块,我把它放在 transition 里面: 如果我想让单元素的这种切换有一些动画效果,大家可以看到现在transition也写了,但是这两个单元素切换的时候并没有动画效果,它俩如果像有动画效果可以怎么写呢? 我们只需要在这写一个,比如说入场的时候 .v-enter-from 也就是说做这两个元素切换的时候,有一个元素要展示,一个元素要隐藏。 示例代码: 展示的元素 动画也是要写v-enter-from的, 刚开始要展示的时候,我让它的opacity可以变成0, 然后当它在展示的过程中 v-enter-active,我让ta的 transition给它三秒 ease-in, 然后在一个v-enter-to, 彻底进入到这个动画结束的这个过程的时候,动画结束了,我让它的opacity变成 1, 也就是做切换的时候马上要展示的组件,它会有一个动画效果,比如说show变成true的时候, hello world组件,它会有一个动画效果, 当show是false的时候,bye world要展示,by world这个元素也会有一个动画,入场动画就实现了。 我们再写一下出场的动画,v-leave-from, 当出场的时候,这一瞬间它的 opacity 一开始应该是一: 然后出场动画其实也是一样的,和入场动画的 v-enter-active 的写法它是一样的,我们把v-enter-active变成v-leave-active,在出场的时候也是对 opacity 进行修改,出场结束的时候,我应该说它的v-leave-to,也就是说它结束的时候,它的 opacity 应该变成多少? 变成0: 这么去写,我们看两个单元素之间做切换展示的时候,会不会有过渡的一个动画效果?刷新一下,点击切换: 你发现一个展示有动画效果,一个隐藏有动画效果。 其实这两个动画效果基本上是看起来好像是一起在执行的, 你看都执行完了,然后整体的动画效果再结束,但是有的时候一般来说我们不会让这个东西做这种切换,一般都是希望比如说你hello world处于一个状态,我点切换的时候 hello world先隐藏bye world再展示,而不是说一边隐藏一边展示,这个时候可以怎么办? 如果你希望实现效果的时候,transition上面你可以写一个mode 等于先是out-in,意思就是你先隐藏再展示,先出去再进来。 这么写完了这个模型之后,我们再去看一下,大家看先隐藏,再展示: 我们也可以比如说先用in-out,那就是先进来再隐藏,点击大家看它先进来,然后再慢慢的隐藏: 这是 in-out和out-in的一个区别: 但如果你不写的话,这个动画的效果是什么样子的呢? 大家可以看,它是两个应该是一起执行的动画: 如果你什么都不写 就一起执行, 如果in-out先入再出, 如果out-in是先出再入。 通过这样的 transition标签,对两个单元素进行一个包裹, 我们就可以再配合一些样式来实现单个元素之间相互切换过程 来实现 切换效果。 但是其实这块还是有一个小问题,我一开始刚进入的时候bye world是展示的,我希望刚进来的时候bye world一开始就可以有一个动画效果, 我点击切换变成 hello world,然后之后再点切换的时候,这个bye world才有动画,但是如果我第一次直接刷新页面,进到这个页面的时候,by world没有动画,如果你希望刚进入页面,bye world的展示也有一个动画,这个时候其实也非常的简单,你只需要在transition这个标签加上appear这样的属性就可以了: 它的意思是我初次对某一个默认元素进行显示的时候,也会给它带上我们写的这种动画效果,我们写了appear之后保存,再到页面上刷新: 大家看第一次进入的时候,bye world也会有一个渐入的效果了,点击或隐藏,当然时间比较慢,因为我上面的动画时长写的是三秒,有点长了我可以写成一秒: 这样的多个单元素标签之间的切换,我们通过 transition标签可以实现: 其实除了多个单元素标签的切换之外, 然后我们再写一个多个单组件之间的切换。我们看一下多个单组件之间的切换,其实也可以用transition来帮助我们实现切换过程的动画效果。 首先我在这里去写两个组件,我们定义两个组件,比如说: 我用子组件怎么用? 是不是components 然后我们写一个对象: 然后: 现在把标签换成组件,做多个单组件之间的切换,也是可以实现这种动画效果的,只需要在外层加一个transition就可以了。 mode与appear它的作用是一模一样的,但组件做切换的时候,你除了可以使用这种写法之外,之前我们讲了一个动态组件, 我们还可以直接去用component这样的标签,然后这么去写:
这个时候你除了使用 v-if 、v-else这样的语法之外,如果你用is语法,也一样的能实现动画效果。 在做多个单组件之间的相互切换动画的时候,我们除了可以使用v-if、v-else这样的指令之外,我们还可以使用component :is这样的语法, 通过动态组件的形式来实现这样的多个单组件之间切换的动画效果。 |
CopyRight 2018-2019 实验室设备网 版权所有 |