专栏首页IMWeb前端团队移动端重构实战系列4——进入离开动画

移动端重构实战系列4——进入离开动画

进入离开动画

在sandal的_animation.scss中我们定义了fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out六组基础动画,下面我们以fade-in/out为例说明如何使用:

直接调用mixin:

@include animation-fade-in;
@include animation-fade-out;

编译出的css为:

.fade-in, .fade-out {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.fade-in {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.fade-out {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

当然为了扩展,mixin还定义了两个参数:animation-fade-in($className: fade, $from: 0)animation-fade-out($className: fade, $to: 0),第一个表示要用的class名字(会自动补上in/out),第二个表示opacity值(from为起始,to为结束)

现在css的动画class已经有了,接下来就是用js把这两个class分别添加到进入和离开的时候。

es6 封装动画进入离开类

export class AnimateInOut {
    constructor({ele, className, inCallback, outCallback}) {
        this.ele = ele.nodeType === 1 ? ele : document.querySelector(ele);
        this.inClass = className + '-in'; // 加上in表示进入class
        this.outClass = className + '-out'; // 加上out表示离开class
        this.inCallback = inCallback; // 进入动画结束后回调函数
        this.outCallback = outCallback; // 离开动画结束后回调函数

        this.animationend = this.whichEndEvent(); // 使用animationend事件
        this.endBind = this.end.bind(this); // 绑定this
    }
    // 进入
    enter() {
        this.ele.classList.add(this.inClass);
        // animation动画结束之后,移除该class
        this.ele.addEventListener(this.animationend, this.endBind);
    }
    // 离开
    leave() {
        this.ele.classList.add(this.outClass);
        // animation动画结束之后,移除该class
        this.ele.addEventListener(this.animationend, this.endBind);
    }
    // 动画结束事件处理函数
    end() {
        var ele = this.ele,
            eleClassList = ele.classList,
            isIn = eleClassList.contains(this.inClass), // 进入
            isOut = eleClassList.contains(this.outClass); // 离开

        ele.removeEventListener(this.animationend, this.endBind);

        if(isIn) {
            eleClassList.remove(this.inClass);
            this.inCallback && this.inCallback();
        }
        if(isOut) {
            eleClassList.remove(this.outClass);
            this.outCallback && this.outCallback();
        }
    }
    // 判断end事件,可独立为一个基础功能
    whichEndEvent() {
        var k
            el = document.createElement('div');

        var animations = {
            "animation" : "animationend",
            "WebkitAnimation": "webkitAnimationEnd"
        }

        for(k in animations) {
            if(el.style[k] !== undefined) {
                return animations[k];
            }
        }
    }
}

PS:注意这里我们采用的animation动画,而不是transition动画,因为transition动画从none到block的时候,直接添加动画的class是不会有动画效果的(除非使用回调函数或promise),而animation动画从none到block的时候添加动画class是可以的。这里不想设计得太复杂,所以直接使用animation动画

调用

function leaveEnd() {
    console.log('hello the world');
}

var animateInOut = new AnimateInOut({ele: $el, className: 'fade', outCallback: leaveEnd});

// 进入的时候调用
animateInOut.enter();

// 离开的时候调用
animateInOut.leave();

PS:本系列教程未完待续,正在码字中...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】

    BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。

    无道
  • 网站右下角[来源网站]显示【前端特效】

    当别人从其他网站访问自己的网站时,如果在自己网站右下角有提示“欢迎来自XXX的朋友访问本站”,是不是逼格满满?!

    无道
  • (2019)[前端]面试题[4]:CSS盒模型你了解多少?

    一个盒子由四个部分组成:conent, padding, border, margin

    无道
  • (2019)[前端]面试题[8]:CSS动画中的transition和animation

    有一个很有意思的现象:如果把transition: width 1s 0.5s ease-in-out;写在:hover上会怎样?

    无道
  • (2019)[前端]面试题[3]:三大定位,相对定位放在固定定位产生什么影响?

    1、设置父元素为固定定位,不设置高度,内部child设置高度和宽度,根据BFC内部box垂直排列的特征:

    无道
  • 三种页面Loading页面加载效果【全屏】

    某些通过Ajax加载数据的页面,如果直接显示空白会给人突兀的感觉。如果加一个Loading的效果,会有大大不一样的效果哦。

    无道
  • CSS3 Loading加载效果合集

    无道
  • (2019)[前端]面试题[5]:CSS单位那些事【px,em,rem】

    无道
  • CSS 制作爱心

    无道
  • (2019)[前端]面试题[6]:水平垂直居中方法

    如果已知子元素宽高度,那么transform: translate(width/2,height/2);一样的效果。

    无道

扫码关注云+社区

领取腾讯云代金券