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是一种特殊的数据结构,看起来像普通对象 ...
随机推荐
- LintCode Search Insert Position
找出指定target的位置(没有此数时为按顺序应当位置). public class Solution { /** * param A : an integer sorted array * para ...
- 通过SSH远程使用ipython notebook
本文讲述如何在本地用浏览器运行远程服务器上的iPython notebook服务. 在远程机器上,启动IPython notebooks服务: remote_user@remote_host$ ipy ...
- js 函数和变量的提升
js 函数和变量的提升 1. 函数的作用域: js中 ,函数的作用域为函数,而不是大括号. var hei = 123;if(true){ hei = 456;}console.log(hei);// ...
- mactype支持qq浏览器
win7上使用mactype之后qq浏览器网页显示的字体不清晰,颜色也比较浅.解决方法: 1. 再qq浏览器地址栏中输入:qqbrowser://flags 2.在设置中启用DirectWrite高清 ...
- 《JavaScript面向对象编程指南》译者序
相对于Perl.Python等动态脚本语言来说,JavaScript确实是一门饱受误解的语言.对于译者这种从20世纪90年代末走过来的C++程序员来说,尤其如此.在那个年代,提起JavaScript总 ...
- bootstrap模态框Esc键不关闭
项目开发时很多时候会需要用到弹出框,而且很多框架都有自己的弹出框,比较现在很流行的bootstrap就有模态框(model). 很多时候这东西用起来非常方便,可以为开发省去很多自己定义的时间!最近项目 ...
- 在package.json里面的script设置环境变量，区分开发及生产环境。注意mac与windows的设置方式不一样
在package.json里面的script设置环境变量,区分开发及生产环境. 注意mac与windows的设置方式不一样. "scripts": { "publish- ...
- Reflector 反编译 .NET文件后修复
反编译后的工程文件用VS2010打开后,在打开窗体时会出现一系列错误提示: 第一种情况: “设计器无法处理第 152 行的代码: base.AutoScaleMode = AutoScaleMode. ...
- C++编程命名规则（转载）
原文地址:http://www.cnblogs.com/ggjucheng/archive/2011/12/15/2289291.html 如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套 ...
- 读CopyOnWriteArrayList有感
除了加锁外,其实还有一种方式可以防止并发修改异常,这就是将读写分离技术(不是数据库上的). 先回顾一下一个常识: 1.JAVA中“=”操作只是将引用和某个对象关联,假如同时有一个线程将引用指向另外一个 ...