沒有在功能上做任何事情來關閉面板

<div class="close" on-click='close'></div> 


Ractive.components['block:close'] = Ractive.extend({ 
    isolated: true, 
    onrender: function() { 

    this.on({ 
     close : function(event) { 
     console.log('close'); 
     } 
    }) 
    } 
    });

當試圖點擊'x'按鈕時，它不會在console.log中顯示「close」。不知道爲什麼它沒有做任何事情。沒有在功能上做任何事情來關閉面板

當點擊關閉時，還在谷歌上查找了動畫（淡出）的ractivejs。沒有使用JQuery找不到方法

來源

2015-04-26 joe

請提供一點更多的上下文，以便我們可以定義問題所在。關於動畫結帳http://docs.ractivejs.org/latest/ractive-transitions-instance – Krasimir

不太清楚你的例子中發生了什麼 - 這工作正常！

Ractive.components['block:close'] = Ractive.extend({ 
 
    isolated: true, 
 
    template: '<div class="close" on-click="close">click me</div>', 
 
    onrender: function() { 
 
    this.on({ 
 
     close: function(event) { 
 
     alert('it works'); 
 
     } 
 
    }); 
 
    } 
 
}); 
 

 
var ractive = new Ractive({ 
 
    el: 'main', 
 
    template: '<block:close/>' 
 
});

<script src='http://cdn.ractivejs.org/latest/ractive.js'></script> 
 

 
<main></main>

要添加淡入淡出等轉換，您需要使用transition plugins。例如：

new Ractive({ 
 
    el: 'main', 
 
    template: '#template' 
 
});

<script src='http://cdn.ractivejs.org/latest/ractive.js'></script> 
 
<script src='https://rawgit.com/ractivejs/ractive-transitions-fade/master/dist/ractive-transitions-fade.js'></script> 
 

 
<main></main> 
 

 
<script id='template' type='text/html'> 
 
    <label> 
 
    <input type='checkbox' checked='{{visible}}'> 
 
    visible (click me) 
 
    </label> 
 
    
 
    {{#if visible}} 
 
    <div intro='fade'>this will fade in</div> 
 
    {{/if}} 
 
</script>

更多信息，請參見the ractive-transitions-fade GitHub repo。

來源

2015-04-26 15:50:52

非常感謝，但我不能在項目中使用transitions插件:(是否有可能使用CSS淡出？我認爲它應該是。 – joe

爲什麼你不能使用transitions插件，是否有bug？插件使用CSS（如果可能的話，會回落到JS計時器） - 儘管你當然可以使用手動定義的CSS動畫/轉換 –

沒有在功能上做任何事情來關閉面板

回答

相關問題