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. git---怎样将分支上的一个单文件合并到主分支上(master)

    一.首先切换到主分支  注意将分支上的数据全部提交 以免造成数据冲突或丢失 git checkeout master 二.选择要合并的文件 git checkout --patch 分支名称  要合并 ...

  2. python3 xml_to_dict、dict_to_xml等互相转换的方法

    from basic_config_vars.config_vars import moviesAllFilePath,moviesFilePath #自定义的一些文件变量 import xmltod ...

  3. C#:抽象类PK密封类

    最近在看关于C#的书,看到了抽象类和抽象方法,另外还看到了密封类和密封方法,那么二者有什么联系又有什么区别,我把最近的收获分享给大家! 1.抽象类和抽象方法: ·C#使用abstract关键字,将类或 ...

  4. LG4718 【模板】Pollard-Rho算法 和 [Cqoi2016]密钥破解

    Pollard-Rho算法 总结了各种卡常技巧的代码: #define int long long typedef __int128 LL; IN int fpow(int a,int b,int m ...

  5. Spring Task定时任务的配置和使用详解

    spring中使用定时任务 1.基于xml配置文件使用定时任务 首先配置spring开启定时任务 <beans xmlns="http://www.springframework.or ...

  6. oracle中日期相关的区间

    and czrqb.lsrqb_rh_sj >= to_date('[?query_date_begin|2011-09-01?]A', 'yyyy-mm-dd') and czrqb.lsrq ...

  7. cookie,session,token介绍

    本文目录 发展史 Cookie Session Token 回到目录 发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档 ...

  8. Spring源码窥探之:Condition

    采用注解的方式来注入bean 1. 编写config类 /** * @author 70KG * @Title: ConditionConfig * @Description: * @date 201 ...

  9. nginx配置文件服务器 linux

    一,安装nginx服务器 点击打开链接 二,配置nginx服务器   ##测试配置文件   sudo /usr/sbin/nginx -t       ##修改配置文件   ##1. 在nginx文件 ...

  10. stm32f103c8t6 怎么使用IAP下载程序

    首先下载官方STM32F10X的IAP Bootloader源码,STM32F10x_AN2557_FW_V3.3.0. 用Keil4打开工程代码STM32F10x_AN2557_FW_V3.3.0P ...