我正在尝试<ul>使用CSS过渡进行滑动.
将<ul>在开始关闭height: 0;.悬停时,高度设置为height:auto;.然而,这导致它只是出现而不是过渡,
如果我从那里height: 40px;开始height: auto;,那么它会向上滑动height: 0;,然后突然跳到正确的高度.
如果不使用JavaScript,我怎么能这样做呢？
#child0 {
height: 0;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent0:hover #child0 {
height: auto;
}
#child40 {
height: 40px;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
} …标题几乎解释了一切。我在 StackOverflow 上搜索了解决方案，但都没有 帮助。
使用经典模态组件的示例：
Vue.component('modal', {
template: `
<transition name="modal">
<div class="modal-wrapper">
<div class="modal-dialog">
<slot></slot>
</div>
</div>
</transition>
`,
})
const app = new Vue({
el: '#app',
data: {
showModal: false,
},
})/* transition */
.modal-enter-active,
.modal-leave-active {
transition: opacity .5s;
}
.modal-enter,
.modal-leave-to {
opacity: 0;
}
.modal-wrapper {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .25);
}
.modal-dialog {
max-width: 90%; …