css transition 实现滑入滑出

更新日期: 2018-12-20阅读量: 8298标签: 动画

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比较复杂,提供了几个默认的:

  1. linear,匀速变化。
  2. ease,逐渐变慢,默认值就是这个。
  3. ease-in,加速变化。
  4. ease-out,减速变化。
  5. ease-in-out,先加速再减速。
  6. 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: 0;
   opacity: 0;
   width: 0; // 由于是滑入,因此需要这个div的宽度从0慢慢变大,变到300px,效果就是从侧边滑进来了。
}
  • 当需要这个div滑入的时候,需要使用js动态给这个div添加一个class:"active"
.active {
                opacity: 1;
                visibility: 1;
                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: 0;
            height: '80%';
            visibility: 0;
            opacity: 0;
}
.active { // 这是滑入状态
                opacity: 1;
                visibility: 1;
                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/
来源:https://www.cnblogs.com/yadiblogs/archive/2018/12/19/10145625.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1652

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

设计师10大必备HTML动画工具

HTML 5已经成为Web开发者当中最流行的语言之一,“健壮的”语言有很大的生产优质万维网内容的能力。HTML 5在近三年的增长迅猛,新引入HTML 5的技术更加的优秀。HTML 5技术被现代浏览器所支持

CSS动画@keyframes的用法

CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash!IE10+支持该属性的。其他低浏览器版本数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。

深入理解 requestAnimationFrame

在Web应用中,实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现

HTML5模拟齿轮动画

这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了

CSS3的变形、过渡、动画、关联属性

transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix;transition-property:过度的属性;animation-name:动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义

CSS动画的属性Transition与Animation

本文总结CSS3中两个用来做动画的属性,一个是transition,另一个是animation。transition在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。

用js实现一个无限循环的动画

为什么要说它,源于看到的一道面试题:问题是用js实现一个无限循环的动画。至于时间间隔为什么是1000/60,这是因为大多数屏幕渲染的时间间隔是每秒60帧。既然setInterval可以搞定为啥还要用requestAnimationFrame呢?

CSS波纹动画

以上就是css波纹动画的代码和效果图。想要看具体的效果可以复制代码浏览,当然啦,也可以设置属于自己的漂亮的背景颜色和链接。

Js HTML DOM动画

为了演示如何通过 JavaScript 来创建 HTML 动画,我们将使用一张简单的网页:JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。这种变化通过一个计数器来调用。当计数器间隔很小时,动画看上去就是连贯的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!