使用DOM API,並添加聽衆在mounted
方法。
基於(link)中提供的的jsfiddle @RecardoPoole,我進行了如下修改:
- 使用
visibility
代替display
- 過渡使用
height 3s, visibility 3s
- 爲
div
完成的div
與內部類slide
,即div
與類snipit
,我加了CSS overflow: hidden
,這是爲了確保外層div
旨意覆蓋文本具有向下滑動(link)
const app = new Vue({
el: '#app',
mounted() {
const originHeight = '125px';
const slideEl = document.getElementsByClassName('slide')[0];
const snipitEl = document.querySelector('div.snipit');
snipitEl.style.transition = 'height 3s, visibility 3s';
slideEl.addEventListener('mouseover', function() {
// mouse is hovering over this element
// slidedown
snipitEl.style.height = originHeight;
snipitEl.style.visibility = 'visible';
});
slideEl.addEventListener('mouseout', function() {
// mouse was hovering over this element, but no longer is
// slideup
snipitEl.style.height = '0px';
snipitEl.style.visibility = 'hidden';
});
}
});
img{
border:1px solid yellow;
margin: 14px 0 0 0;
}
div.slide {
width: 310px;
height: 230px;
float: left;
border:1px solid red;
text-align: center;
position: relative;
background: url(http://dummyimage.com/310x230) no-repeat top center;
}
div.slide div {
overflow: hidden;
width: 250px;
height: 100px;
padding: 0;
visibility: hidden;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
border:1px solid red;
bottom: 14px;
left:30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
<div class="slide">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="snipit">
<h4>Image 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
是否有任何VueJs組件,讓我增加一個卡這樣的時候?示例:http://jsfiddle.net/NuWna/2/ –
@RecardoPoole已經修改瞭解決方案。 – kevguy