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. Windows下学习C语言有哪些集成开发软件?

    前言 初学者学习C语言遇到的最大困难想必就是搭建环境了,相当多的初学者就是被搭建环境导致放弃了学习编程,就我自己的经验而言,初学编程不应该受限于环境,使用成熟好用的环境就可以了,之后熟悉一些可以在慢慢 ...

  2. ssh本机失败(ssh: connect to host localhost port 22: Connection refused)

    ssh本机失败(ssh: connect to host localhost port 22: Connection refused) 一. 问题描述 之前一直在服务上使用宝塔面板, 今天突发奇想, ...

  3. jvm整理

    我 2.JVM内存区域 p{ text-align: center; font-size: 12px; margin: 4px 0 0 0; } .nav-thumb >div{ positio ...

  4. web 错误代码解析

    404表示文件或资源未找到java WEB常见的错误代码1.1xx-信息提示:这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个1xx响应.100-继续.101-切换协议.2. ...

  5. linux系统编程之管道(二)

    今天继续研究管道,话不多说,言归正传: 对于管道,有一定的读写规则,所以这里主要是对它的规则进行探讨,具体规则如下: 规则一: 下面用程序来验证下,还是用上节学的子进程写数据,父进程读取数据的例子,只 ...

  6. 《3+1团队》【Beta】Scrum meeting 2

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 3+1团队 团队博客地址 https://home.cnblogs.com/u/3-1group ...

  7. linux 小常识

    背景: 在工具中遇到一些linux相关的问题,解决后做个笔记记录下来,后续遇到就不用 在查来查去了 1. 启动地址配置 127.0.0.1 和 0.0.0.0 区别 127.0.0.1 地址只能对本机 ...

  8. unsupervised learning: clustering介绍

    unsupervised learning 上面是监督学习与无监督学习的比较,监督学习的training set是一组带label(y)的训练集,而无监督学习不带有label(y). 上图中的监督学习 ...

  9. matlab的diff()函数

    diff():求差分 一阶差分 X = [1 1 2 3 5 8 13 21]; Y = diff(X) 结果: Y = 0 1 1 2 3 5 8 X = [1 1 1; 5 5 5; 25 25 ...

  10. nachos3.4 threads管理 (c++)

    Main.cc //引导代码初始化操作系统内核.允许直接调用内部操作系统功能,简化调试和测试.在实践中,bootstrap代码只会初始化数据结构, //并启动一个用户程序来打印登录提示.//许多内容只 ...