Vue2.5 旅游项目实例24 详情页-在项目中添加基础动画
2023-09-27 14:24:39 时间
创建分支: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
相关文章
- Python 线性拟合实例,超简单线性拟合,python线性回归,统计学基础,线性拟合代码实现
- OCM_第十五天课程:Section6 —》数据库性能调优 _SQL 访问建议 /SQL 性能分析器/配置基线模板/SQL 执行计划管理/实例限制
- Vue2.5 旅游项目实例16 城市选择页-搜索逻辑实现
- MATLAB实例:二元高斯分布图
- vue实例的生命周期
- Java feign方式对同一个服务编写多个远程调用实例报错及3种解决办法
- Windows下多个Mysql实例配置主从(转)
- 阿里云 随实例一起购买的数据盘是否需要自行挂载处理
- javascript常用实例的实现与封装
- 深度学习提速280%!阿里云性能怪兽GN6 V100 GPU实例深度测试
- 我的Android进阶之旅------>Android之动画之Frame Animation实例