avalon2学习教程14动画使用
avalon2实际上没有实现完整的动画模块，它只是对现有的CSS3动画或jquery animate再包装一层。
我们先说如何用CSS3为avalon实现动画效果。首先要使用avalon.effect注册一个特效。
avalon.effect(name, definition)
所有注册了的特效，都可以在avalon.effects对象中找到。
css3动画要求我们至少添加4个类名。这个是从angular那里学过来的。因此如何你以前的项目是基于angular，它那些CSS动画类可以原封不动地搬过来用。
avalon.effect('animate', {
enterClass: 'animate-enter',
enterActiveClass: 'animate-enter-active',
leaveClass: 'animate-leave',
leaveActiveClass: 'animate-leave-active',
})
当然，这些类名会默认帮你添加，因为它内部是这样实现的。
avalon.effect = function (name, definition) {
avalon.effects[name] = definition
if (support.css) {
if (!definition.enterClass) {
definition.enterClass = name + '-enter'
}
if (!definition.enterActiveClass) {
definition.enterActiveClass = definition.enterClass + '-active'
}
if (!definition.leaveClass) {
definition.leaveClass = name + '-leave'
}
if (!definition.leaveActiveClass) {
definition.leaveActiveClass = definition.leaveClass + '-active'
}
}
if (!definition.action) {
definition.action = 'enter'
}
}
因此你可以简化成这样：
avalon.effect('animate', {})
注册完，我们就需要在样式表中添加真正的CSS类。
<style>
.animate-enter, .animate-leave{
width:100px;
height:100px;
background: #29b6f6;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
.animate-enter-active, .animate-leave{
width:300px;
}
.animate-leave-active{
width:100px;
}
</style>
我们还得定义一个vm，里面指明动画的动作（默认有三种方式, enter, leave, move）及动画结束时的回调（这是可选的）
var vm = avalon.define({
$id: 'effect',
aaa: "test",
action: 'enter',
enterCb: function(){
avalon.log('动画完成')
},
leaveCb: function(){
avalon.log('动画回到原点')
}
})
然后页面上这样使用：
<div ms-controller='effect' >
<div ms-effect="{is:'animate', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}">
{{@aaa}}
</div>
<button ms-click='@action = @action !== "leave" ? "leave": "enter"'
type="button">click</button>
</div>
ms-effect的值为一个对象，其中is是必选。除了action, 还支持这么多种回调：
onEnterDone, onLeaveDone, onEnterAbort, onLeaveAbort, onBeforeEnter, onBeforeLeave
如果使用JS实现，则是这样的：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../dist/avalon.js"></script>
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<style>
.ani{
width:100px;
height:100px;
background: #29b6f6;
}
</style>
<script>
avalon.effect('animate', {
enter: function(el, done){
$(el).animate({width: 300},1000,done)
},
leave: function(el, done){
$(el).animate({width: 100},1000,done)
}
})
var vm = avalon.define({
$id: 'effect',
aaa: "test",
action: 'enter',
enterCb: function(){
avalon.log('动画完成')
},
leaveCb: function(){
avalon.log('动画回到原点')
}
})
</script>
</head>
<body>
<div ms-controller='effect' >
<div class='ani' ms-effect="{is:'animate', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}">
{{@aaa}}
</div>
<button ms-click='@action = @action !== "leave" ? "leave": "enter"'
type="button">click</button>
</div>
</body>
</html>
一个CSS3位置效果
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../dist/avalon.js"></script>
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<style>
.ani{
width:100px;
height:100px;
background: #ff6e6e;
}
.wave-enter, .wave-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.wave-enter {
position:absolute;
left:45%;
}
.wave-enter-active {
left:0;
}
.wave-leave {
position:absolute;
left:0;
}
.wave-leave-active {
left:45%;
}
</style>
<script>
avalon.effect('wave', {})
var vm = avalon.define({
$id: 'effect',
action: 'enter',
enterCb: function () {
avalon.log('动画完成')
},
leaveCb: function () {
avalon.log('动画回到原点')
}
})
</script>
</head>
<body>
<div ms-controller='effect' >
<div class='ani' ms-effect="{is:'wave', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}">
<button ms-click='@action = @action !== "leave" ? "leave": "enter"'
type="button">click</button>
</div>
</div>
</body>
</html>
ms-widget+ms-for+ms-if+ms-effect的组合动画效果！
<!DOCTYPE html>
<html>
<head>
<title>ms-if</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../dist/avalon.js"></script>
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<style>
.ani{
width:100px;
height:100px;
background: #ff6e6e;
}
</style>
<script >
avalon.component('ms-button', {
template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',
defaults: {
buttonText: "button"
},
soleSlot: 'buttonText'
})
avalon.effect('zoom', {
enter: function (el, done) {
$(el).css({width: 0, height: 0}).animate({
width: 100, height: 100
}, 1000, done)
},
leave: function (el, done) {
$(el).animate({
width: 0, height: 0
}, 1000, done)
}
})
var vm = avalon.define({
$id: "test",
arr: [1,2,3],
aaa: 222,
toggle: true
})
</script>
</head>
<body ms-controller="test" >
<div ms-for="el in @arr">
<div class='ani'
ms-attr="{eee:el}"
ms-if="@toggle"
ms-widget='{is:"ms-button"}'
ms-effect="{is:'zoom'}">{{@aaa}}::{{el}}</div>
</div>
</body>
</html>
最后看一下ms-for与stagger的动画效果。这次为了与angular一次，stagger应该为一个小数，它会让当前元素延迟stagger秒执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../dist/avalon.js"></script>
<style>
.my-repeat-animation {
width: 400px;
height: 30px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.ng-enter {
-webkit-animation-name: enter_animation;
animation-name: enter_animation;
}
.ng-enter-stagger {
animation-delay:300ms;
-webkit-animation-delay:300ms;
}
.ng-leave {
-webkit-animation-name: leave_animation;
animation-name: leave_animation;
}
@keyframes enter_animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes leave_animation {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes enter_animation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes leave_animation {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
<script>
avalon.effect("my-repeat-animation", {
enterClass: "ng-enter",
leaveClass: "ng-leave"
})
var vm = avalon.define({
$id: "test",
array: [1, 2, 3, 4],
getBg: function() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
},
add: function() {
vm.array.push(vm.array.length + 1)
vm.array.push(vm.array.length + 1)
vm.array.push(vm.array.length + 1)
vm.array.push(vm.array.length + 1)
vm.array.push(vm.array.length + 1)
vm.array.push(vm.array.length + 1)
vm.array.push(vm.array.length + 1)
vm.array.push(vm.array.length + 1)
vm.array.push(vm.array.length + 1)
},
value: ""
})
vm.$watch("value", function(a) {
if (a) {
vm.array.removeAll(function(el) {
return el !== a
})
} else {
if(vm.array.length < 12)
vm.add()
}
})
</script>
</head>
<body ms-controller="test">
<button ms-click="@add">Add</button>
<input placeholder="只保留" ms-duplex-number="@value" />
<div class="my-repeat-animation" ms-for="item in @array"
ms-css="{background:@getBg()}"
ms-effect="{is:'my-repeat-animation',stagger:0.3}">
{{item}}
</div>
</body>
</html>
目前，avalon的ms-effect可以与ms-visible,ms-if,ms-repeat连用。ms-effect也可以单独或与其他指令使用，这时需要你指定action。
<div ms-effect="{is:"effectName", action: @action}">
avalon2学习教程14动画使用的更多相关文章
- avalon2学习教程06样式操作
avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Obj ...
- avalon2学习教程09循环操作
avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...
- avalon2学习教程15指令总结
avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...
- avalon2学习教程13组件使用
avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优 ...
- avalon2学习教程12数据验证
avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能.数据验证就是其中之一.现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery ...
- avalon2学习教程08插入移除操作
本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1 ...
- avalon2学习教程05属性操作
avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样. avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp" ...
- avalon2学习教程 03数据填充
数据填充是一个模版最基础的功能,直接从JSON(vm)取出数据,放到适当的位置上.在静态模板中,不区分文本与HTML,只看你的字符串是否有< >来决定生成文本节点与元素节点.但MVVM中, ...
- avalon2学习教程02之vm
avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象 ...
随机推荐
- Python::OS 模块 -- 进程管理
os模块的简介参看 Python::OS 模块 -- 简介 os模块的文件相关操作参看 Python::OS 模块 -- 文件和目录操作 os模块的进程参数 Python::OS 模块 -- 进程参数 ...
- svn Q&A
Q1:在svn commit的时候,会出现某某文件 is missing.这是因为此次提交时:远程repository中并没有该文件,而且本地repository也没有该文件. 具体原因: 1.可能因 ...
- Selenium定位一 --单个元素定位方法
Selenium-Webdriver 提供了强大的元素定位方法,支持以下三种方法. 单个对象的定位方法 多个对象的定位方法 层级定位 定位单个元素在定位单个元素时,selenium-webdriver ...
- linux之"server" directive is not allowed here in
配置完rewrite之后重启nginx发现如下错误 "server" directive is not allowed here in* 原因是因为 外部配置的simple.con ...
- UVa 679 小球下落
题意:这道题规律性极强,虽然是二叉树,但是可以用模拟来写. 1<<20 意思是1的二进制左移20位,即2的20次方. 对于二叉树中一个节点 k ,其左节点,右节点的编号分别是2k 和 2k ...
- Sharepoint CAML 增删改查 List
Lists.UpdateListItems 方法 (websvcLists) Windows SharePoint Services 3 Adds, deletes, or updates the ...
- 利用Handler延时机制实现点击两次退出程序
第一步:声明一个标记变量用来判断是否需要退出 第二步:重写handlerMessage方法 第三步:自定义一个exit()方法给标记变量赋值 第四步:重写onKeyDown方法 private s ...
- Spring学习 Ioc篇（三）
1.在注解注入方式中,首先要在xml中引入如下的红线的命名空间: <?xml version="1.0" encoding="UTF-8" ?> & ...
- python学习-day03：整形、字符串常用方法：
一.数字,int 1.1: a.int(object)转化数字类型: a=' b=int(a) b=b+1000 print(b) 223 <class 'int'> 答案 b.转化二进制 ...
- VS2013添加解决方案内项目的引用，编译时提示找不到文件
1.添加解决方案内项目引用 2.编译时报错 原因: 要引用的程序集的Framework版本与当前项目的版本不一致. 解决: 统一引用与被引用程序集的版本.