[Vuejs]-How to turn jQuery into Methods: function in VueJS

by

0👍

Use the DOM api and add the listeners in the mounted method.

Based on the jsfiddle @RecardoPoole provided (link), I made the following changes:

  • use visibility instead of display
  • transition is done using height 3s, visibility 3s
  • for the div inside the div with class slide, i.e. the div with class snipit, I added the CSS overflow: hidden, this is to make sure the outer divs will cover the texts when being slided down (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>

Leave a comment