87,989
社区成员
发帖
与我相关
我的任务
分享<!-- 模板 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>transition的模板</title>
<link rel=“stylesheet” href="style.css" />
<!-- xian yin ru vue.js -->
<script src="./vue.js"></script>
<style>
component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: 0;
}
</style>
</head>
<body>
<div>
<transition name="component-fade" >
<component v-bind:is="view"></component>
</transition>
</div>
<script>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
</script>
</body>
</html>
所有代码