transform,transition,animation的混合使用——高手之路

css3

浏览数:1,182

2017-5-21

每个制作出来的css3动画都凝结了设计者和创作者智慧的结晶,以此,我们要向前辈致敬;动画的出现给单调的网页平添了活性,是单纯的

展示页面变得不再那么枯燥,所以,作为一个web前端的开发者能够创作出属于自己的特有的动画,我感到很高兴。

今天,我向大家介绍实现css下拉菜单的动画制作的不同方法,希望能给大家有所帮助和启示。首先,先来个效果图给大家看一看:

那么接下来我就给大家介绍一下这个动画的组成,它主要包括三个小动画组成。第一部分就是鼠标的滑过的渐变动画;第二部分,就是右边

的三角小箭头的动画,这个说起来也很简单,这个三角形是使用css样式写的控制元素的四条边的颜色和各边的显隐来形成;第三部分,就是

展开的下拉框。

根据我之前写过的一篇文章《transform,transition,animation的混合使用——进阶》中对动画的组合形式的分类,将动画的实现分类有

transform和transition组合,transform和animation组合,再结合动画的触发形式,pc端常见的鼠标滑过、鼠标单击,wap端的触摸形式,

该动画的最终的呈现形式将以下四种常见形式:
第一种,实现方案用transition(鼠标滑过)
第二种,实现方案用animation(鼠标滑过)
第三种,实现方案用transition(鼠标单击或触摸)
第四种,实现方案用animation(鼠标单击或触摸)

我将详细讲解前两种的实现,后两种的实现(略讲),由于是触发方式的改变,所以对于javascript有一定使用经验的同学将会根据自己的

使用习惯很容易的形成自己所需要的代码,进而形成自己的css动画下拉菜单的解决方案。

鼠标滑过–下拉菜单动画

transition和transform组合
html代码:


css代码:

.l-list {
    position: absolute;
    top: 100%;
    z-index: -1;
    width: 100%;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #cecece;
    box-sizing: border-box;
    opacity: 0;
}

.l-list-item {
    list-style: none;
    padding: 4px 8px;
}

.l-list-item a {
    display: block;
    padding: 4px 0;
    font-size: 16px;
    color: #000;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s linear;
}

.l-list-item a:hover {
    color: #fff;
    background-color: #cecece;
}

.l-drop-menu {
    position: relative;
    width: 142px;
    height: auto;
    margin: 0 auto;
}

.l-drop-menu>span {
    position: relative;
    display: block;
    padding: 8px 20px;
    text-align: center;
    color: #58a;
    background-color: #fff;
    cursor: pointer;
}

.l-drop-menu>span::after {
    position: absolute;
    top: 8px;
    right: 16px;
    content: '';
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 8px;
    border-style: dashed dashed solid;
    border-color: transparent transparent #c2c2c2;
    transition: all 0.3s linear;
}

.l-drop-menu>span:hover {
    color: #fff;
    background-color: #cecece;
}

.l-drop-menu>span:hover::after {
    top: 16px;
    border-style: solid dashed dashed;
    border-color: #ffffff transparent transparent;
}

以上是animation和transition两种不同实现形式的公用代码。

transiton实现形式的代码

.l-menu-1 .l-list {
     transform: translate3d(0, 10px, 0);
    backface-visibility: hidden;
    transition: all 0.3s linear;
}

.l-menu-1:hover .l-list {
    z-index: 2;
    overflow: auto;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

animation实现形式的css代码

.l-menu-2 .l-list{
    animation: l-animation-up 0.5s;
}

.l-menu-2:hover .l-list{
    z-index: 2;
    opacity: 1;
    animation: l-animation-down 0.5s;
}

@-webkit-keyframes l-animation-down {
    from {
        -webkit-transform: translate3d(0, 10px, 0);
        opacity: .1
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes l-animation-down {
    from {
        transform: translate3d(0, 10px, 0);
        opacity: .1
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@-webkit-keyframes l-animation-up {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 10px, 0);
        opacity: .1
    }
}

@keyframes l-animation-up {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
    to {
        transform: translate3d(0, 10px, 0);
        opacity: .1
    }
}

代码晒完了,我们就来说一说做这个动画的注意点吧!

1.第一种用transition和transform的形式,下拉框我们通常的实现形式通过定位来实现,本案例的实现形式和传统的实现形式并无二样;
2.第一种用transition和transform的形式,我们传统的控制显隐我们使用的是display:none,display:block;但明显这种方案用在这里

不合适,使用这种解决方案的结果就是没用过渡效果,也即是没有了动画效果,我采用了opacity和z-index来解决这种问题(详情查看和分

析代码);
3.第二种用animation和transform的形式,这种实现形式我相信大家在学习和工作中都看过,但这种形式要实现的动画效果和第一种之间,

我觉得地址用实现形式更好,因为这个第二种,只有展开时的过渡效果,而没有闭合时的过渡效果,对于要求并不高的同学来说,或许这样

的效果还不错,但是对于我这种追求极客的来说,我还是不满足,所以,我就试着有加入了一个移开时的动画,实现了跟第一种一样的动画

效果(有一个刷新页面的问题),但我要接着说的是在第二点中我有提过有opacity和z-index解决transition形式动画没有过渡的情况,在

第二种形式,display:none,display:block这种控制显隐的方式也可用。


综上,下拉菜单动画最优选择第一种,其次,选择第二种。

演示地址:https://lvzhenbang.github.io/css3-animate/drop-menu-anim.html

单击–下拉菜单动画

单击的动画和鼠标滑过的动画效果区别就是触发形式的不同,从而造成了css代码的相应差异,transition通过单击实现就是通过改变在元素

中添加.l-menu-active来实现;animation通过单击实现就是通过在元素中添加.l-menu-in, .l-menu-out来实现的。

html代码同上

css代码 公用和上面两个例子重合的代码如下:

.l-list {
    position: absolute;
    top: 100%;
    display: none;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
}

.l-list-item {
    list-style: none;
    padding: 4px 8px;
    border-top: 1px solid #cecece;
}

.l-list-item a {
    display: block;
    padding: 4px 0;
    font-size: 16px;
    color: #000;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
}

.l-list-item a:hover {
    color: #fff;
    background-color: #cecece;
}

.l-drop-menu {
    position: relative;
    width: 142px;
    height: auto;
    margin: 0 auto;
}

.l-drop-menu>span {
    position: relative;
    display: block;
    padding: 10px 20px;
    text-align: center;
    color: #58a;
    background-color: #fff;
    cursor: pointer;
}

.l-drop-menu>span::after {
    position: absolute;
    top: 16px;
    right: 16px;
    content: '';
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 8px;
    border-style: solid dashed dashed;
    border-color: #58a transparent transparent;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

transition实现的代码:

.l-drop-menu.l-menu-active>span, .l-drop-menu.l-menu-in>span {
    color: #fff;
    background-color: #cecece;
}

.l-drop-menu.l-menu-active>span::after, .l-drop-menu.l-menu-in>span::after {
    top: 8px;
    border-style: dashed dashed solid;
    border-color: transparent transparent #58a;
}

.l-menu-1.l-menu-active .l-list {
    display: block;
    -webki-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.l-menu-1 .l-list {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

animation的代码:

.l-menu-2.l-menu-out .l-list {
    display: none;
    -webkit-animation: l-animation-up 0.5s;
    animation: l-animation-up 0.5s;
}

.l-menu-2.l-menu-in .l-list {
    display: block;
    -webkit-animation: l-animation-down 0.5s;
    animation: l-animation-down 0.5s;
}

@-webkit-keyframes l-animation-down {
    from {
        -webkit-transform: translate3d(0, 10px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes l-animation-down {
    from {
        transform: translate3d(0, 10px, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes l-animation-up {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 10px, 0);
    }
}

@keyframes l-animation-up {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, 10px, 0);
    }
}

综上,你会发现transition实现的动画,当你单击时发现动画用display:none,display:block;这种方式依然不能达到预期的效果,所以

还是应该采用opacity和z-index的方案;但是使用animation测没有任何问题,与此同时当你刷新网页时,不会出现问题。

所以,当单击实现下拉菜单这两种方案都不错,但是理解起来相对简单的是animation的形式。

关于如何改transition的单击实现方案,各位同学可以当作一个小例子来实践一下。

transition的js代码:

var menu1 = document.getElementsByClassName('l-menu-1')[0];

menu1.onclick = function() {
    var className = menu1.className;
    if (~className.indexOf('l-menu-active')) {
        menu1.className = className.replace(' l-menu-active', '');
    } else {
        menu1.className += ' l-menu-active';
    }
}

animation的js代码:

var menu2 = document.getElementsByClassName('l-menu-2')[0];
menu2.onclick = function() {
    var className = menu2.className;
    if (~className.indexOf('l-menu-in')) {
        menu2.className = className.replace('l-menu-in', 'l-menu-out');
    } else {
        menu2.className += ' l-menu-in';
    }
}

演示地址:https://lvzhenbang.github.io/css3-animate/drop-menu-anim2.html

接下来的文章我会给大家带来一些我自己的做css动画的

源代码下载地址:github地址:https://github.com/lvzhenbang/css3-animate/tree/gh-pages

原文地址:https://juejin.im/post/591faaa4a22b9d005866c1c3