Javascript 不同敲除成分之间的转换

当我在淘汰组件之间切换时，我试图应用

CSS

转换，但实现这一点我并没有太大的乐趣。本质上，我想要一个具有固定宽度的

div

，但其内部内容将发生变化。在这样做时，我希望能够转换元素的重新调整大小

ko.components.register（“大”{
视图模型：函数（vm）{
this.items=vm.value.items；
},
模板：'
'
});
ko.components.register（“小”{
视图模型：函数（vm）{
this.items=vm.value.items；
},
模板：“”
});
var vm={}；
vm.componentName=ko.可观察（“小”）；
vm.items=ko.observearray（[{name:“A”}，{name:“B”}，{name:“C”}]）；
ko.应用绑定（vm）；
setInterval（函数（）{
if（vm.componentName（）=“small”）{vm.componentName（“big”）；}
else{vm.componentName（“small”）；}
}, 3000);
.box{
宽度：200px；
-webkit转换：高度2s；
过渡：高度2s；
-webkit过渡：宽度2s；
过渡：宽度2s；
}
.大{
边框：薄而实的黑色；
}
.小{
边框：薄而实的黑色；
填充：10px 10px 10px 10px；
}
.项目{
左侧填充：10px；
}
实际上您正在切换组件，这意味着DOM正在重新构建，因此我看不到使用CSS制作动画的方法

您可以构建自己的绑定处理程序，使用Javascript为您制作动画：


ko.bindingHandlers.animatingComponent={
init：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
var value=valueAccessor（）；
var componentName=value.name；
//创建一个新的可观察对象，这样我们就可以延迟ko的分量
//绑定构建新组件
var actualComponentName=ko.observable（componentName（））；
componentName.subscribe（函数（新组件）{
$（元素）.hide（500，函数（）{
实际组件名称（新组件）；
$（元素）.show（500）；
});
});
bindingHandlers.component.init（元素，函数（）{
返回{name:actualComponentName，params:value.params}；
}、所有绑定、视图模型、绑定上下文）；
}
};
ko.components.register（“大”{
视图模型：函数（vm）{
this.items=vm.value.items；
},
模板：'
'
});
ko.components.register（“小”{
视图模型：函数（vm）{
this.items=vm.value.items；
},
模板：“”
});
var vm={}；
vm.componentName=ko.可观察（“小”）；
vm.items=ko.observearray（[{name:“A”}，{name:“B”}，{name:“C”}]）；
ko.应用绑定（vm）；
setInterval（函数（）{
if（vm.componentName（）=“small”）{vm.componentName（“big”）；}
else{vm.componentName（“small”）；}
}, 3000);
.box{
宽度：200px；
}
.大{
边框：薄而实的黑色；
}
.小{
边框：薄而实的黑色；
填充：10px 10px 10px 10px；
}
.项目{
左侧填充：10px；
}
虽然只花了一天的大部分时间，但我还是过渡到了工作。我有一个变量，它可以记住最后的显示大小（当组件发生变化时，它将从这里开始）。当组件更改时，我将“可见性”设置为“隐藏”，将“大小”设置为“默认”，以便获得div的预期大小。然后，我将其调整回上一个显示大小并使其可见，然后将其调整为新大小，然后发生转换

注意，我还必须稍微更改CSS


ko.components.register（“大”{
视图模型：函数（vm）{
this.items=vm.value.items；
},
模板：'
'
});
ko.components.register（“小”{
视图模型：函数（vm）{
this.items=vm.value.items；
},
模板：“”
});
var未计提；
ko.bindingHandlers.sizeGet={
init：函数（元素、值访问器）{
var sizer=valueAccessor（）；
浆纱机({
高度：''，
宽度：“”，
可见性：“隐藏”
});
变量nextUnclipped={
高度：element.scrollHeight+'px'，
宽度：element.scrollWidth+'px'，
可见性：“可见”
};
如果（未夹持）施胶器（未夹持）；
未剪裁=下一次剪裁；
setTimeout（函数（）{
施胶器（未夹紧）；
}, 0);
}
};
var vm=（函数（）{
var activeComponent=ko.可观察（'small'），
默认大小={
宽度：“”，
高度：“”
},
boxSize=可观察的ko（默认尺寸）；
返回{
组件名称：activeComponent，
boxSize:boxSize，
项目：ko.Array([{
姓名：“A”
}, {
名称：“大”
}, {
名字：“猫”
}, {
名称：“下降”
}])
};
}());
ko.应用绑定（vm）；
变量i=设置间隔（函数（）{
if（vm.componentName（）=“小”）{
vm.componentName（“大”）；
}否则{
vm.组件名称（“小型”）；
}
}, 3000);
setTimeout（clearInterval.bind（null，i），45000）
.box{
宽度：200px；
-webkit过渡：高度2s，宽度2s；
过渡：高度2s，宽度2s；
溢出：隐藏；
}
.大{
边框：薄而实的黑色；
}
.小{
边框：薄而实的黑色；
填充：10px 10px 10px 10px；
}
.项目{
左侧填充：10px；
}

没错，我明白了，这不是我想要的效果，但我想我可以用它。因为组件之间互不了解，所以我认为不可能使用CSSI应用转换。请看您在这里做什么。。。我试着稍微修改这个例子（所以不是褪色，它只是改变了高度），但有点困难。明白纯CSS是行不通的。有什么建议吗？对不起，那把小提琴真糟糕。这里有一个更好的尝试。我很困惑，你是如何淡出元素，然后再回到。。。当它处理同一个元素时？第一期医管局