为了账号安全,请及时绑定邮箱和手机立即绑定

css transition 实现滑入滑出

标签:
Html/CSS

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/p/10145625.html  

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消