vue 에서 팝 업 애니메이션 효 과 를 실현 하 는 예제 코드

1398 단어 vue팝 업 층애니메이션
1

<template>
 <div class="home">
 
  <!--           transition  ，      name -->
  <transition name="mybox">
   <div class="box" v-show="boxshow"></div>
  </transition>
  
  <button @click="togglebox">  </button>
 </div>
</template>
2

data() {
  return {
   boxshow: false,
  };
 },
3

methods: {
  togglebox: function () {
   this.boxshow = !this.boxshow;
  },
 },
스타일:

<style lang="scss" scoped>
.box {
 height: 500px;
 background-color: rgb(245, 224, 224);
 overflow: hidden;
}

/*     name    */

.mybox-leave-active,
.mybox-enter-active {
 transition: all 1s ease;
}

.mybox-leave-active,
.mybox-enter {
 height: 0px !important;
}

.mybox-leave,
.mybox-enter-active {
 height: 500px;
}
</style>
효과.
在这里插入图片描述
vue 에서 팝 업 애니메이션 효 과 를 실현 하 는 예제 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 팝 업 애니메이션 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 십시오.앞으로 많은 지원 을 바 랍 니 다!
OpenLayers 3 지도 에 대한 기본 조작 실현
Vim 같은 단어 와 하 이 라이트 기능 일치

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage