javascript - [2.113]avalon 使用ms-effect给自定义组件添加动画报错
本文介绍了javascript - [2.113]avalon 使用ms-effect给自定义组件添加动画报错的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问题
1.使用最新版本的avalon给自定义组件添加通过 ms-effect 和 css3 添加的入场动画的时侯出现错误。
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浏览器）
版本
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版本
不报错。
解决方案
司徒自摸 更新文档之后修复。
这篇关于javascript - [2.113]avalon 使用ms-effect给自定义组件添加动画报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
