zoukankan      html  css  js  c++  java
  • Vue2.5 旅游项目实例24 详情页-在项目中添加基础动画

    创建分支: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
  • 相关阅读:
    CPLD
    红牛的广告:你的能量超乎你的想象
    Verilog设计中的锁存器
    Verilog语言
    看技术看不懂,看不进去的解决方案
    jQuery Ajax 操作函数
    Html的Padding,Margin自己理解图
    【深度好文】多线程之WaitHandle-->派生-》Mutex信号量构造
    【深度好文】多线程之WaitHandle-->派生-》Semaphore信号量构造
    开源框架 KJFrameForAndroid
  • 原文地址:https://www.cnblogs.com/joe235/p/12517374.html
Copyright © 2011-2022 走看看