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. python之set集合、深浅copy初识、join()和fromkeys() 的用法

    一.set集合 特点: set集合是无序的,所以不存在索引. set集合中的每个元素都是不重复的. set集合中的每个元素都是可哈希的. 有增删改查操作: 1. 增加 add    当添加的内容重复时 ...

  2. Android GOT Hook

    最后介绍的这种hook方式原理比较简单,只需要将GOT表中的目标函数地址替换为我们自己的函数地址即可,但它的缺点是只能对导入函数进行hook,还需要对elf文件的结构有所了解. 一.获取到GOT表在内 ...

  3. 交互式计算引擎REOLAP篇

    交互式计算引擎ROLAP篇   摘自:<大数据技术体系详解:原理.架构与实践> 一.Impala Impala最初由Cloudera公司开发的,其最初设计动机是充分结合传统数据库与大数据系 ...

  4. MySQL线程状态详解

    前言: 我们常用 show processlist 或 show full processlist 查看数据库连接状态,其中比较关注的是 State 列,此列表示该连接此刻所在的状态.那么你真的了解不 ...

  5. 【转】采用Gson解析含有多种JsonObject的复杂json

    本文对应的项目是MultiTypeJsonParser ,项目地址 https://github.com/sososeen09/MultiTypeJsonParser 0 前奏 使用 Gson 去解析 ...

  6. SpringBoot -生成Entity和Dto互转的双向枚举类 -使用注解@Mapper(componentModel = "spring")

    1.导入pom文件 ,版本号自定 <!--mapStruct依赖--> <dependency> <groupId>org.mapstruct</groupI ...

  7. test20190816 NOIP2019 模拟赛

    100+100+20=220,T3吐槽:整个考室没有一个人正确地理解了题意. 树上路径(phantasm) Akari 的学校的校门前生长着一排 n 棵树,从西向东依次编号为 1 ∼ n.相邻两棵树间 ...

  8. c语言中字符串转数字的函数

    ANSI C 规范定义了 atof().atoi().atol().strtod().strtol().strtoul() 共6个可以将字符串转换为数字的函数,大家可以对比学习.另外在 C99 / C ...

  9. (二)IDEA使用,快捷键

    idea的快捷键设置: idea支持使用其他开发工具的快捷键,可以在此设置: idea 默认的本身的快捷键: 常用快捷键 Ctrl + Alt + s 打开设置选项 Alt + Enter 修复提示 ...

  10. Greenplum Segment 的检测机制

    Greenplum集群具有较好的容错性和高可用性,其中一点就体现在segment镜像机制上.接下来本文会简单地阐述segment的作用以及segment镜像机制是如何保证GP高可用的. Segment ...