首页 教程 API文档

添加动画规则

2015-09-15 13:49:02

属性


使用频率 中高
所属模块 Std.animation
成员类型 静态成员函数

描述


Std.animation.append方法可以将一堆@keyframes规则的动画字符串进行解析,并且保存到StdJS内部,同时,还会保存到文档中作为css3 keyframes

通过Std.animation.append添加的动画规则可以在StdJS中使用,也可以在css中使用.

另外: type类型为text/std-animation的script标签可以自动载入@keyframes规则,例如


<script type="text/std-animation">
    @keyframes animation1{
        0%{
            color:red;
            background-color:blue;
        }
        50%{
            color:black;
            background-color:yellow;
        }
        100%{
            color:rgb(112,32,342);
            background-color:white;
        }
    }
    @keyframes animation2{
        from{
            width:20px;
            height:20px;
        }
        to{
            width:80px;
            height:20px;
        }
    }
</script>
        

实际上,Std.dom.behaviorScript["text/std-animation"] 的内部还是调用的Std.animation.append方法

语法



Object Std.animation.append(String rules,Boolean appendToCSSAnimation=true);
        

参数


名称 类型 描述
rules String css keyframes规则字符串
appendToCSSAnimation Boolean 是否添加为css keyframes,默认为true,当值为false的时候,那么只会在StdJS内部保存

返回值


this对象,通常情况下为Std.animation

相关例子



Std.animation.append(
    "@keyframes animation1{0%{color:red}50%{color:blue}100%{color:yellow} }"
);