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. gitlab及jenkins

    1.安装配置gitlab服务,在gitlab新建一个仓库,配置本地密钥,并通过ssh方式拉取gitlab仓库代码 https://packages.gitlab.com/gitlab/gitlab-c ...

  2. Django图书管理系统(前端对有外键的数据表增删改查)

    图书管理 书籍管理 book name 项目源码位置:https://gitee.com/machangwei-8/learning_materials/tree/master/%E9%A1%B9%E ...

  3. Linux系统运维相关的面试题 (问答题)

    这里给大家整理了一些Linux系统运维相关的面试题,有些问题没有标准答案,希望要去参加Linux运维面试的朋友,可以先思考下这些问题.   一.Linux操作系统知识 1.常见的Linux发行版本都有 ...

  4. 代码重复检查工具——python的使用CPD比较好用,clone digger针对py2,其他有名的如Simian PMD-CPD CloneDR CCCD CCFinder Bauhaus CodePro

    代码重复检测: cpd --minimum-tokens 100 --files g:\source\python\ --language python >log.txt 输出类似: ===== ...

  5. 安装k8s,高可用3 master安装脚本

    每个在新集群里,记得更改三个节点的IP即可. 第一步还是要执行那个root脚本,准备好系统环境,安装好软件. 先安装在每个节点上使用docker安装好etcd.(sh script domain et ...

  6. 《AlwaysRun!》第七次作业:团队项目设计完善&编码

    项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nwnu-daizh/   这个作业的要求在哪里 https://www.cnblogs.com/nwnu-da ...

  7. robot framework 笔记(一)

    背景: 平时使用rf时会用到一些方法,长时间不用就会忘记,本文用来记录当做自己的小笔记 内容持续更新中········ 一.robot framework 大小写转换 1.转换小写: ${low} E ...

  8. el-select remote 远程搜索 多个共享一个options,options改变时输入框值不显示名称的问题

    原因:el-select remote 远程搜索 多个共享一个options,当使用 remote-method 请求数据后,options被改变,value的值不包含在options中,value的 ...

  9. koa2-router中间件来请求数据获取

    原理 虽然不使用中间件也能获取请求数据 对于POST请求的处理,koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中. 安装koa2版本 ...

  10. mongodb 副本集的主的选举

    primary的选举依赖于各个实例的优先权重,默认权重都是1 复本集的主挑选权重最高的,权重一样的无法控制谁为主 设置各个实例的优先权重,挑选自己想要的实例为主,只有primary可以更改权重配置 c ...