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是一种特殊的数据结构,看起来像普通对象 ...
随机推荐
- Conntect Bluetooth devices in iOS.
I understand that the External Accessory framework in iOS 3.0 and later will allow my application to ...
- windows7共享硬盘 虚拟机Mac访问windows7硬盘
选择本地磁盘(G)-->右键-->共享-->高级共享点击高级共享 确定 完成共享 虚拟机Mac 访问共享磁盘 2.苹果MAC系统,点击桌面.打开顶部菜单 “前往”. 3.菜单 ...
- An internal error occured during :"C/C++" . java.lang.NullPointerException
用eclipse 导入cocos2d项目的时候报了这个错,导致项目在eclipse 里面是空的,反复导入也不行. 解决办法,把其他正常项目里面的proj.android目录下面的.cproject文件 ...
- Android 开发错误信息001
Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessExceptio ...
- codeforces mysterious present 最长上升子序列+倒序打印路径
link:http://codeforces.com/problemset/problem/4/D #include <iostream> #include <cstdio> ...
- JavaScript中“typeof”运算符与“instanceof”运算符的差异
在JavaScript中,运算符“typeof”和“instanceof”都可以用来判断数据的类型,那么这两个运算符有什么不同之处呢? 差异一:使用方式不同. 最明显的差异就是这两个运算符的使用方式了 ...
- Apache Shiro 使用手册（五）Shiro 配置说明
Apache Shiro的配置主要分为四部分: 对象和属性的定义与配置 URL的过滤器配置 静态用户配置 静态角色配置 其中,由于用户.角色一般由后台进行操作的动态数据,因此Shiro配置一般仅包含 ...
- Datagridview 列绑定
Datagridview 列绑定 dataGridView1.Columns.Clear(); dataGridView1.Columns.Add("id", "id&q ...
- C++中引用的本质
一般的教材上讲到引用时,都是说"引用是对象的一个别名".我认为这种定义是不清晰的,不利于初学者理解引用.至少我自己曾经被这个定义困扰了一段时间.到底什么是"别名" ...
- 修复eclipse中使用mave update project后JRE都变成1.5的问题
在项目中的parent pom中添加如下代码即可 <properties> <project.build.sourceEncoding>UTF-8</project.bu ...