html:

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<transition name="slide" mode="out-in">
<component v-bind:is="currentTabComponent" :prodInfoList="productInfo"></component>
</transition>

css:

.slide-enter-active {
transition: all .2s ease-in;
}
.slide-leave-active {
// transition: all 0s ease-in;
}
.slide-enter, .slide-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(20%);
opacity:;
}

transition 滑动动画的更多相关文章

  1. JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

    /** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...

  2. jQuery实用小技巧-获取选中的的下拉框和返回头部滑动动画

    //获取选中的下拉框 $('#someElement').find('option:selected'); $('#someElement option:selected'); //返回头部滑动动画 ...

  3. Android滑动动画ViewFlipper和视频播放VideoView的使用

    Android滑动动画,可以用ViewPager或者ViewFlipper实现. ViewPager自带触摸滑动功能,结合Fragment使用很好,来自补充组件android-support-v4.j ...

  4. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  5. viewpager处理(二):设置当前item时,让viewpager不出现滑动动画

    我们在使用viewpager.setCurrentItem(position);的时候,viewpager出现滑动动画,如何去掉这个动画呢? 可以用viewpager.setCurrentItem(p ...

  6. android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码

    Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...

  7. animation和transition做动画的区别

    animation做动画,是不需要去触发的,可以定义一开始就执行 transition做动画,是需要人为触发,才能执行的

  8. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  9. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

随机推荐

  1. 【转】三个重复的ACK意味着发生拥塞?

    三次重复的ACK,可能是丢包引起的,丢包可能是网络拥塞造成的,也可能是信号失真造成的. 三次重复的ACK,也有可能是乱序引起的,而乱序和网络拥塞没有直接关系. 如果就写这两行,感觉什么都没写,接下来的 ...

  2. requests-html模块(下)

    render方法 我们先理一下关系requests和的作者是同一个人,pyppeteer是nodejs中puppeteer的非官方实现 requests-html调用的pyppeteer与浏览器进行交 ...

  3. 1.后期特效合成AE概述&&工作流程&&磁盘缓存清理

    1.简介: After Effects:是一款专业的后期制作与特效合成软件: 2.AE界面介绍  2.1 项目面板   2.2 合成预览面板   2.3 时间线面板     2.4 辅助面板    2 ...

  4. Scrum会议博客以及测试报告(β阶段)

    3组Alpha冲刺阶段博客目录 一.Scrum Meeting1. [第十周会议记录](链接地址:https://www.cnblogs.com/Cherrison-Time/articles/120 ...

  5. 2013.5.21 - KDD第三十三天

    实验室例会,上到一半之后发现今天下午第二节课是Android,上次两节Android都没跟中秋碰头,这次又不能碰头了,然 后就赶紧给中秋发了个短信,说我在开会,晚上约个时间再谈.正好也称这一下午加一晚 ...

  6. 2013.4.30 - KDD第十二天

    早上来实验室,本来打算向秦师兄要文献的,不过秦师兄上午不在,所以就没有联系他.于是就开始调试郑茂的代码,发现原来那个itoa函数不是标准库里面 的,所以可能只有windows上可以用.然后我就在打电脑 ...

  7. dict排序

    根据dict值排序 c = {1:10,2:9,3:8} c = sorted(c.items(), key=lambda d: d[1], reverse=1) reverse=1 从大到小排列 起 ...

  8. Kotlin星投影与泛型约束详解

    星投影(star projection): 继续来学习Kotlin泛型相关的东东,星投影(star projection),这是个啥东东呢?下面先来说一下概念: 1.对于Star<out T&g ...

  9. Mybatis 使用PageHelper封装通用Dao分页方法

    参考: PageHelper官网:https://pagehelper.github.io/docs/howtouse/#3-%E5%A6%82%E4%BD%95%E5%9C%A8%E4%BB%A3% ...

  10. 指数基金介绍专栏(8):国企指数(H股指数)详细介绍,最新资料解析,看这一篇就够了

    作者:牛大 | 公众号:定投五分钟 大家好,我是牛大.每天五分钟,投资你自己:坚持基金定投,终会财富自由! 昨天牛大给大家介绍了恒生指数,没看的朋友可以去公众号看一下. 指数基金介绍专栏(7):恒生指 ...