创建分支:detail-animation
拉去到本地并切换分支:
git pull
git checkout detail-animation
在详情页点击banner,显示画廊轮播组件的时候,添加渐隐渐显的动画效果。
在 src/common 目录下创建 fade 文件夹,并新建FadeAnimation.vue文件:
<template> <transition> <slot></slot> </transition> </template> <script> export default { name: 'FadeAnimation' } </script> <style lang="stylus" scoped> .v-enter, .v-leave-to opacity: 0 .v-enter-active, .v-leave-active transition: opacity .5s </style>
打开detail目录下的Banner.vue文件,引用:
<fade-animation> <common-gallary :imgs="gallaryImgs" v-show="showGallary" @close="gallaryClose"></common-gallary> </fade-animation> <script> import CommonGallary from 'common/gallary/Gallary' import FadeAnimation from 'common/fade/FadeAnimation' export default { name: 'DetailBanner', components: { CommonGallary, FadeAnimation }, } </script>
fade-animation 组件做一个包裹,common-gallary 组件做一个插槽的形式,插入到 fade-animation 这个组件里,里面的 slot 代表的就是 common-gallary ,然后在 common-gallary 外部加了一个动画效果。所以当 common-gallary 组件进行展示或者隐藏的时候,会有一个渐隐渐显的动画效果。
这时点击 banner ,明显会看到一个逐渐出现的效果,关闭时也有个渐隐的效果。
提交代码:
git add .
git commit -m "banner渐隐渐显动画效果"
git push
git checkout master
git merge detail-animation
git push