初始化渲染动画

通过给Animate组件指定a:appear={true}属性，可以设置元素初始化渲染时的动画。和enter/leave动画一样它将添加animate-appear & animate-appear-active类名，并且触发a:appearStart & a:appear & a:appearEnd事件。

  1. <Animate a:appear={true} class="appear">appear</Animate>
  1. .appear {
  2.     display: inline-block;
  3.     padding: 10px;
  4.     border: 1px solid #eee;
  5. }
  6. .animate-appear {
  7.     transform: scale(0.01);
  8. }
  9. .animate-appear-active {
  10.     transition: all 1s;
  11. }
  1. var Component = Intact.extend({
  2.     template: template
  3. });

定义一个组件来操作上述Component的挂载：

  1. var C = Intact.extend({
  2.     template: '<button ev-click={self.append.bind(self)}\
  3.         style="display: block">挂载Component</button>',
  4.     append: function() {
  5.         Intact.mount(Component, document.getElementById('app'));
  6.     }
  7. });
  8. Intact.mount(C, document.getElementById('app'));