css transition 实现滑入滑出

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/

巴特西

css transition 实现滑入滑出

第一问：哪些属性值变化会触发这个transition呢？

第二问：transition的具体用法？

使用技巧，实现滑入滑出

一定要记住，是width等这些属性变化时，才会触发，因此需要设置一个初始的状态，再设置一个最终的状态，我在这里是通过js动态添加class实现设置最终状态的。你也可以给hover设置不同状态。

最新文章

热门文章