Vue2.5 学习笔记 9.7 动画效果

短命女 2022-04-24 00:50 171阅读 0赞

这节教程的实现： 将上次那个detail/banner.vue的图片预览与取消预览的动作做动画效果过渡。

1. 新建fadeanimation组件，有可能别的组件也会用到 所以坐公共

![20190411131647578.png][]

// 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 0.5s
    </style>

然后去detail/banner.vue中修改代码

// Banner.vue
    
    // 先导入组件
    
    import FadeAnimation from 'common/fade/FadeAnimation'
    
      components: {
        CommonGallary,
        FadeAnimation
      }
    // 然后将事件元素包裹起来 就完成了。
        <fade-animation>
          <common-gallary
            :imgs="gallaryImgs"
            v-show="showGallary"
            @close="handleGallaryClose"
          >
          </common-gallary>
        </fade-animation>

然后就可以了 = =很简单有没有

[20190411131647578.png]: /images/20220221/906d08d7352a4d0aa71f0ce7247ae01e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-动画效果

vue动画效果 vue中动画效果是很简单的一个东西，vue帮助我们做了一些动画封装，同时也支持自定义动画，过度，第三方库，这些方式都可以实现，我们一一举例说明注意：下

Dear 丶/ 2023年10月12日 19:37/ 0 赞/ 82 阅读

相关 JavaScript学习笔记（二十）DOM动画效果

function move( ele , attr , target)\{ // 1. 关闭开启定时器; clearInterval( ele.timer ); e

喜欢ヅ旅行/ 2023年10月06日 15:52/ 0 赞/ 22 阅读

相关 Vue的过渡&动画效果-transition

![20210727104234223.gif][] / 可以设置不同的进入和离开动画 / / 设置持续时间和动画函数 / .fade-

我不是女神ヾ/ 2022年09月01日 08:12/ 0 赞/ 253 阅读

相关 HTML——jquery学习笔记+实例+动画效果+表格处理

HTML——jquery学习笔记+实例 $("img").hover(function () { alert("鼠标移动到图片上");

深藏阁楼爱情的钟/ 2022年06月05日 04:48/ 0 赞/ 171 阅读

相关 Vue2.5 学习笔记 9.7 动画效果

这节教程的实现：将上次那个detail/banner.vue的图片预览与取消预览的动作做动画效果过渡。 1. 新建fadeanimation组件，有可能别的组件也会用到所

短命女/ 2022年04月24日 00:50/ 0 赞/ 172 阅读

相关 jQuery笔记（三）动画效果

动画效果 1、显示与隐藏 ①show() - 显示无参版本 - 不具有动画效果 ②show(speed,callback)有参版本 - 具有

约定不等于承诺〃/ 2022年04月13日 05:29/ 0 赞/ 274 阅读

相关 Vue学习笔记5.7 封装过渡动画

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

た入场券/ 2022年03月20日 13:58/ 0 赞/ 281 阅读

相关 Vue动画学习

单元素/组件的过渡 Vue提供transition的封装组件，在下列情形中，可以给任何元素和组件添加进入和过渡动画 1. 条件渲染(v-if) 2. 条件展示(v-

古城微笑少年丶/ 2022年03月02日 04:49/ 0 赞/ 336 阅读

相关 vue学习笔记(过渡效果)

通过transition操作元素的css样式，可以达到过渡效果（渐进） <template> <div> <div id="demo">

今天药忘吃喽~/ 2022年02月22日 06:07/ 0 赞/ 300 阅读

相关【Vue】学习笔记三：动画、过渡

文章目录使用过渡类名 \[使用第三方 CSS 动画库\](https://cn.vuejs.org/v2/guide/trans

比眉伴天荒/ 2021年09月20日 23:46/ 0 赞/ 471 阅读