假设我有一个基于属性显示视图的模板:
Say I have a template which displays a view based on a property:
{{#if App.contentsAreVisible}} {{view ToggleContents}} {{/if}}通过设置App.set("contentsAreVisible", [true/false]);
这一切正常.
但是,我现在想在切换视图时设置动画.连接到 didInsertElement 可以动画显示该区域,但我不能在 willDestroyElement 中做同样的事情,因为一旦该函数返回,元素就会被删除,在动画开始之前有机会跑.
However, I now want to animate when the view is toggled. Hooking into didInsertElement works to animate showing the area, but I can't do the same in willDestroyElement because the element is removed as soon as that function returns, before the animation has a chance to run.
App.ToggleContents = Ember.View.extend({ // this works fine didInsertElement: function(){ this.$().hide().show("slow"); }, // this doesn't work willDestroyElement: function(){ this.$().hide("slow", function(){ // animation is complete, notify that the element can be removed }); } });有什么方法可以让视图推迟从 DOM 中移除元素,直到动画完成?
Is there any way to tell the view to defer removing the element from the DOM until the animation is complete?
这是一个带有交互式示例的小提琴:jsfiddle/rlivsey/RxxPU/
Here's a fiddle with an interactive example: jsfiddle/rlivsey/RxxPU/
推荐答案您可以在您的视图上创建一个 hide 函数,该函数在回调完成时删除该视图,请参阅 jsfiddle/7EuSC/
You could create a hide function on your view which removes the view when the callback is finished, see jsfiddle/7EuSC/
把手:
<script type="text/x-handlebars" data-template-name="tmpl" > <button {{action "hide" }}>hide</button> This is my test view which is faded in and out </script>JavaScript:
Ember.View.create({ templateName: 'tmpl', didInsertElement: function() { this.$().hide().show("slow"); }, _hideViewChanged: function() { if (this.get('hideView')) { this.hide(); } }.observes('hideView'), hide: function() { var that = this; this.$().hide("slow", function() { that.remove(); }); } }).append();更多推荐
推迟删除视图以便可以对其进行动画处理
发布评论