current position:Home>The modal box component is encapsulated in Vue, and the animation effect in Vue

The modal box component is encapsulated in Vue, and the animation effect in Vue

2022-04-29 07:37:04imkaifan

<transition name="modal-fade">
</transition>

.modal-fade-enter-active, .modal-fade-leave-active{
    
    transition: all 0.5s ease;
    transform: translateY(0);
}
.modal-fade-enter, .modal-fade-leave-active {
    
    opacity: 0;
    transform: translateY(50%);
}

Structure code : madal-mask Yes, the whole background is black ( Have transparent values ),madal-mask It's also full background black ( Have transparent values )
 Insert picture description here

 Insert picture description here
 Insert picture description here
 Insert picture description here

copyright notice
author[imkaifan],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290528481316.html

Random recommended