[2.113]avalon 使用ms-effect给自定义组件添加动画报错

RDDcoding
  • 135

问题

1.使用最新版本的avalon给自定义组件添加通过 ms-effectcss3 添加的入场动画的时侯出现错误。

2.用chrome的检查工具查看,发现 虚拟父节点.appendChild(虚拟节点) 之后 虚拟节点 丢失其子节点,并致使错误。

完整代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>effect-bug?_issue</title>


    <script src="http://7xp7u3.com1.z0.glb.clouddn.com/o_1aqrf90bb1s5c89dmo7e6772f.js
"></script>
    <!-- ?已经下载了最新版本,并上传到了自己的七牛空间 -->
    <script>
    var vm = avalon.define({
        $id: "sky",
        auth_name: "RDD",
        starsArr: [1, 2, 3, 4, 5, 6],
        action: "enter",
    })

    avalon.component("ms-star", {
        template: '<div>为了<slot /></div>',
        defaults: {
            starwish: "世界和平",
        },
        soleSlot: "starwish"
    })

    avalon.effect("star", {
        enterClass: "star-enter",
        enterActiveClass: "star-enter-active",
    })
    </script>


    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(top, rgb(77, 55, 99) 27%, rgb(32, 36, 103) 100%);
        background: -o-linear-gradient(top, rgb(77, 55, 99) 27%, rgb(32, 36, 103) 100%);
        background: -ms-linear-gradient(top, rgb(77, 55, 99) 27%, rgb(32, 36, 103) 100%);
        background: -moz-linear-gradient(top, rgb(77, 55, 99) 27%, rgb(32, 36, 103) 100%);
        background: -webkit-linear-gradient(top, rgb(77, 55, 99) 27%, rgb(32, 36, 103) 100%);
    }

    .star-enter {
        font-size: 10vw;
        line-height: 19vw;
        position: relative;
        left: 100vw;
        height: 19vw;
        list-style: none;
        -webkit-transition: left 2s;
        -o-transition: left 2s;
        transition: left 2s;
        text-align: left;
        color: #fff;
    }

    .star-enter-active {
        left: 5vw;
    }
    </style>


</head>

<body ms-controller="sky">
    <ms-star ms-for="starnumber in [0,1,2,3,4,5]" ms-widget='{starwish:@starsArr[starnumber],$id:"star"+starnumber}' ms-effect='{is:"star",action:@action}'>
    </ms-star>
</body>

</html>

报错信息

使用Chrome浏览器
(使用Chrome浏览器)

使用Chrome浏览器
(使用Chrome浏览器)

使用Chrome浏览器
(使用Chrome浏览器)

版本

  • built in 2016-8-23:18 version 2.113 by 司徒正美

  • 2.1.5 and npm 2.1.15

  • 修正 ms-controller, ms-important的移除类名的实现

  • 实现后端渲染,

  • fix safari, 微信不支持使用Object.defineProperty重写元素属性的BUG

  • 分离DOM API

  • fix ms-on BUG

尝试

使用
1⃣️该版本https://cdnjs.cloudflare.com/...
2⃣️2.1.11版本
不报错。

回复
阅读 2.7k
1 个回答

司徒自摸 更新文档之后修复。

宣传栏