RactiveJS-11 Transitions

来源：互联网发布：成女脸型数据编辑：程序博客网时间：2024/05/24 06:12

可以通过给elemnt增加自定义的intro属性来指定element被渲染时出现的效果，常用的效果包括：

fade：渐入
fly：屏幕左侧飞入
slide：从上到下展开

这几个效果都需要额外下载插件来实现。

利用outro可以实现消失的效果。

为了给每个元素增加效果，可以结合show方法来定义效果：

{{#if visible === 1 }}<button intro='slide' on-tap='show:2'>Click me!</button>{{elseif visible === 2 }}<button intro='slide' on-tap='show:3'>And me!</button>{{elseif visible === 3 }}<button intro='slide' on-tap='show:1'>Now click me!</button>{{/if}}var ractive = new Ractive({  el: output,  template: template,  data: { visible: 1 }});ractive.on({  show: function ( event, which ) {    this.animate( 'visible', which );  }});

其中which代表模板中传入的参数，即show:后面的参数

为了防止一个动画没有结束下一个动画已经开始的情况，使用then方法，返回一个Promise对象：

ractive.on({  show: function ( event, which ) {    ractive.set( 'visible', null ).then( function () {      ractive.set( 'visible', which );    });  }});

不光set方法可以返回一个Promise对象，update、teardown、render以及向push等所有数组方法在内的方法都可以返回Promise对象。

可以为各个方法传入参数来控制各个方法：

<button intro='fade:{duration:2000}'        outro='fly'        on-tap='show:2'>  Click me!</button>

0 0