avalon2学习教程06样式操作

avalon2的ms-css的变革思路与ms-attr一样，将多个操作合并成到一个对象里面处理，因此没有ms-css-name="value"，只有ms-css="Object"或ms-css="Array".

注意，当你用对象字面量的方式传参时，注意存在－号的键名要用“”号括起来。

这个会报错.正确写法是以下两种

在avalon1.*系列，允许你在属性值中加入插值表达式，如

ms-css-width=”prop”(会自动补px)，ms-css-height=”{{prop}}%”, ms-css-color=”prop”, ms-css-background-color=”prop”, ms-css-font-size=”{{prop}}px
这些在avalon2中都不支持，它顶多帮你的样式加上厂商前缀，驼峰化，对数字属性加上px。

            var vm = avalon.define({
                $id: "test",
                background: "red"
            })


            

                红
                黄
                绿

我们来看另一个动画效果：

            var vm = avalon.define({
                $id: "test",
                percent: 0
            })
            var a = true
            var id = setInterval(function() {
                if (a) {
                    if (vm.percent  0) {
                        vm.percent--
                    } else {
                        a = true
                    }
                }
            }, 100)

            .handerx{
                width:20px;
                height:20px;
                position: absolute;
                color:#fff;
                background: #000;
            }
            .sliderx{
                width:100%;
                height:20px;
                position: relative;
            }
            .body{
                padding:40px;
            }

{{ @percent }}

最后看一下与ms-duplex结合使用的例子

        ms-css

            var vm = avalon.define({
                $id: "test",
                w: 100,
                h: 100,
                click: function () {
                    vm.w = vm.w + 10;
                    vm.h = vm.h + 10;
                }
            })



{{ @w }} x {{ @h }}

            

W:

H:

如果读者一口气看了N篇教程，建议马上到GITHUB里下avalon.js 的源码，动手试试。多看不如多码，那样才是成功的学习方式。