Fork me on GitHub

vue-原生动画

发表于

12月16日更新版本

最近遇到很多项目要求兼容在ie，很多伙伴们喜欢的一些css3的动画效果不能实现（话说ie9不支持transition真是一个让人烦心的事）,抽个空闲时间，分装了一个原生的动画效果和大家分享一下。

这是在vue中的使用实例，如果不是用vue，你可以把代码抠出来~~~我直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
    <div class="ContactUs-wrap">
        <div class="content">
            <div class="content-item">
                <div class="item">
                    <div class="img">
                        <img src="../../assets/img/biaozhun.jpg" alt="">
                        <div class="text-mask">
                            <span class="text">标准信用等级</span>
                        </div>
                    </div>
                    <div class="mask" id="mask1" @mouseenter="showMask" @mouseleave="hideMask">
                        <span class="words">对行为主体的信用状况及逆行充分展示，并按照严格的赋分标准出具相应的信用等级。</span>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
    export default {
        name: 'ContactUs',
        methods: {
            //mask透明度改变
            showMask(e){
                var event = e || window.event;
                console.log(event.srcElement.id)
                this.tomove(document.getElementById(event.srcElement.id),100,"opacity")
            },
            hideMask(e){
                var event = e || window.event;
                console.log(event.srcElement.classList[0])
                this.tomove(document.getElementById(event.srcElement.id),1,"opacity")
            },
            tomove(obj,target,style,callback){
                var that = this;
                clearInterval(obj.times)
                obj.times=setInterval(function(){
                    var eleStyle;
                    if(style=="opacity"){
                        eleStyle=parseFloat(that.getStyle(obj,style))*100;
                    }else{
                        eleStyle=parseInt(that.getStyle(obj,style));
                    }
                    var speed;
                    if(eleStyle<target){
                       speed=Math.ceil((target-eleStyle)/10);
                    }else{
                       speed=Math.floor((target-eleStyle)/10);
                    }
                    if(eleStyle==target){
                        clearInterval(obj.times)
                        if(callback){callback();}  
                    }else{
                        if(style=="opacity"){
                            obj.style.opacity=(eleStyle+speed)/100;
                        }else{
                            obj.style[style]=eleStyle+speed+"px";
                        }
                    }
                },30)
            },
            getStyle(obj,style){
                if(obj.currentStyle){
                   return obj.currentStyle[style];
                }else{
                   return getComputedStyle(obj,null)[style]
                }
            }
        }
    }
</script>

具体使用说明：

1、这是一个模仿淡入淡出的效果，我们在遮罩层mask上面添加 @mouseenter=”showMask” @mouseleave=”hideMask” 这两个方法

2、我们在showMask方法里面要获取道当前元素：var event = e || window.event;主要是兼容ie和谷歌火狐等浏览器；这块不理解的可以找度娘，不做详细介绍;

3、然后就是showMask方法调用我们分装好的tomove方法，可以看到要传四个参数，然后效果就出来了。参数参数说明如下：

obj：当前对象（滑进去的元素）

target：当前对象要达到的效果最终样式（比如透明度为1等等）

style：当前对象要改变的属性（比如宽、高、margin、left）

callback：当达到的效果要执行的回调函数

4、再来说一下getStyle，getStyle是用于获取元素属性值的一种兼容ie、谷歌等浏览器的方法，了解详细可以问度娘。

getStyle(obj,style){
                if(obj.currentStyle){
                   return obj.currentStyle[style];
                }else{
                   return getComputedStyle(obj,null)[style]
                }
            }

5、这个函数能实行的一些动画：淡入淡出（fade）、放大缩小(scale)、slideUp等等效果

6、可能功能还不完善，如果有不对的地方还请提上宝贵一间。

-------------���Ľ�����л�����Ķ�-------------