transition是css最简单的动画。 通常当一个div属性变化时，我们会立即看的变化，从旧样式到新样式是一瞬间的，嗖嗖嗖！！！
但是，如果我希望是慢慢的从一种状态，转变成另外一种状态，怎么办？ transition可以做到。
第一问：哪些属性值变化会触发这个transition呢？
一般常见的有：width, height, opacity, color, z-index, visibility等等很多，这里是所有的：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
第二问：transition的具体用法？
transition是这四个的简写：
{
transition-property // 触发transition的属性值，默认all
transition-duration // transition执行时间
transition-timing-function // 时间变化函数
transition-delay // 执行transition之前的时间
}
其中第三个transition-timing-function比较复杂，提供了几个默认的：
linear，匀速变化。
ease，逐渐变慢，默认值就是这个。
ease-in，加速变化。
ease-out，减速变化。
ease-in-out，先加速再减速。
cubic-bezier，自定义变化函数。
使用transition简写示例：
{
transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
transition: all 1s ease-out;
transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;
}
使用技巧，实现滑入滑出
实现一个元素出现或者消失，有几种方案：display:none 和opacity:0
使用display的话，不会触发transition，只能实现“快入快出”
而opacity和visibility可以触发transition。
到这里大眼一看似乎是可以通过opacity和visibility配合transition实现。具体如何实现呢？
首先这个要滑入滑出的div，刚开始并不在页面上。因此需要初始化：
div{
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-ms-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
visibility:;
opacity:;
width: 0; // 由于是滑入，因此需要这个div的宽度从0慢慢变大，变到300px，效果就是从侧边滑进来了。
}
当需要这个div滑入的时候，需要使用js动态给这个div添加一个class："active"
.active {
opacity:;
visibility:;
width: 300px;
}
一定要记住，是width等这些属性变化时，才会触发，因此需要设置一个初始的状态，再设置一个最终的状态，我在这里是通过js动态添加class实现设置最终状态的。你也可以给hover设置不同状态。
我的完整css代码：
.detail_wrap{ // 这是初始状态
transition: width 0.4s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
width:;
height: '80%';
visibility:;
opacity:;
}
.active { // 这是滑入状态
opacity:;
visibility:;
width: 300px;
}
啊，或许你会问，这不是滑入吗？怎么没有滑出呢？
当当当当~ 奥妙在与我使用了一个flag来动态判断要不要加上active 这个class。这样的话，active 添加或者消失，都可以触发这个transition的。
参考文章：http://litianyi.cc/technology/2014/08/27/css-transition/ ease-in 和ease-out 了解更多请移步 https://css-tricks.com/ease-out-in-ease-in-out/
【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton
FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...
WPF技术触屏上的应用系列(五): 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果
原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...
jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出
1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...
JQuery动画之滑入滑出动画
1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...
div层的滑入滑出实例
js窗口边缘滑入滑出效果-初级代码
...随机推荐
java项目命名规范
一.命名规范 1. 项目名全部小写 2. 包名全部小写 3. 类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写. 如:public class MyFirstClass{} 4. 变量 ...
sql 查询最近30分钟或者自定义时间数据
) FROM dual; 30分钟或者自定义
Openvswitch原理与代码分析(3): openvswitch内核模块的加载
上一节我们讲了ovs-vswitchd,其中虚拟网桥初始化的时候,对调用内核模块来添加虚拟网卡. 我们从openvswitch内核模块的加载过程,来看这个过程. 在datapath/dat ...
mfc110.dll丢失，解决方法
mfc110.dll下载_附文件使用方法 mfc110.dll是存放在windows系统中的一个重要dll文件,缺少它可能会造成部分软件或游戏无法正常运行.当系统提示“没有找到mfc110.dll”或 ...
Innobackupex全备恢复(原理、演示)
一. Innobackupex恢复原理 After creating a backup, the data is not ready to be restored. There might b ...
js中对象的自定义排序
//并返回一个可以用来对包含该成员的对象数组进行排序的比较函数 var compareAsc = function (prop) { return function (obj1, obj2) { va ...
神奇高效的Linux命令行
一.为什么要学linux命令 Linux是由命令行组成的操作系统,精髓在命令行,无论图形界面发展到什么水平,命令行方式的操作永远是不会变的.Linux命令有许多强大的功能:从简单的磁盘操作.文件存取, ...
python字符串查找
a = "string test" a.index("g") a.find("g")
开机自启动nginx，php-fpm
开机自启动nginx,php-fpm(其他服务类似) centos 7以上是用Systemd进行系统初始化的,Systemd 是 Linux 系统中最新的初始化系统(init),它主要的设计目标是克服 ...
在linux环境下为eclipse配置jdk以及Tomcat服务(附图解详细步骤)
环境:jdk8,Tomcat7,eclipse 需要先在linux上安装好对应的软件及java环境,如果还没有安装的,可以先去看我之前写的两篇博客:ubuntu/linux中安装Tomcat(附图解详 ...
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
