Vue 접 기 효과 구현 예시 코드

5622 단어 Vue벌리다접다
본 고 는 Vue 가 접 는 효 과 를 실현 하 는 예제 코드 를 소개 하고 여러분 에 게 공유 하 며 구체 적 으로 다음 과 같 습 니 다.
효 과 는 다음 과 같 습 니 다:

1.html 코드

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>js           </title>
  <script type="text/javascript" src="https://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
  <div id="container"> 
 <div id="wrap">
 <div>
    <h1>             ，     “  ”     ，     “  ”     </h1>
 </div>
 </div>
 <div id="read-more"></div>
  </div>
</body>
 </html>
2.js 코드,가장 중요 한 것

$(function() {
 var slideHeight = 45; // px          
 var defHeight = $('#wrap').height();
 if(defHeight >= slideHeight) {
 $('#wrap').css('height', slideHeight + 'px');
 $('#read-more').append('<a href="#" rel="external nofollow" >  </a>');
 $('#read-more a').click(function() {
  var curHeight = $('#wrap').height();
  if(curHeight == slideHeight) {
  $('#wrap').animate({
   height: defHeight
  }, "normal");
  $('#read-more a').html('  ');
  } else {
  $('#wrap').animate({
   height: slideHeight
  }, "normal");
  $('#read-more a').html('  ');
  }
  return false;
 });
 }
});
3.css 코드

#container {
 margin: 0 auto;
 width: 600px;
 border: 1px solid #3bb2d0;
}
 
#wrap {
 position: relative;
 padding: 10px;
 overflow: hidden;
}
 
#read-more {
 padding: 5px;
 background: #fff;
 color: #333;
}
 
#read-more a {
 padding-right: 22px;
 no-repeat 100% 50%;
 font-weight: bold;
 text-decoration: none;
}
 
#read-more a: hover {
 color: #000;
}
jQuery 방식 으로 상기 효 과 를 실현 하 는 것 을 제외 하고 Vue 에서 도 실현 할 수 있 습 니 다.다음은 해결 방법 입 니 다.
1.collapse.js 파일 만 들 기

const elTransition =
 "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
 "before-enter"(el) {
  el.style.transition = elTransition;
  if (!el.dataset) el.dataset = {};

  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;

  el.style.height = 0;
  el.style.paddingTop = 0;
  el.style.paddingBottom = 0;
 },

 enter(el) {
  el.dataset.oldOverflow = el.style.overflow;
  if (el.scrollHeight !== 0) {
   el.style.height = el.scrollHeight + "px";
   el.style.paddingTop = el.dataset.oldPaddingTop;
   el.style.paddingBottom = el.dataset.oldPaddingBottom;
  } else {
   el.style.height = "";
   el.style.paddingTop = el.dataset.oldPaddingTop;
   el.style.paddingBottom = el.dataset.oldPaddingBottom;
  }

  el.style.overflow = "hidden";
 },

 "after-enter"(el) {
  el.style.transition = "";
  el.style.height = "";
  el.style.overflow = el.dataset.oldOverflow;
 },

 "before-leave"(el) {
  if (!el.dataset) el.dataset = {};
  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;
  el.dataset.oldOverflow = el.style.overflow;

  el.style.height = el.scrollHeight + "px";
  el.style.overflow = "hidden";
 },

 leave(el) {
  if (el.scrollHeight !== 0) {
   el.style.transition = elTransition;
   el.style.height = 0;
   el.style.paddingTop = 0;
   el.style.paddingBottom = 0;
  }
 },

 "after-leave"(el) {
  el.style.transition = "";
  el.style.height = "";
  el.style.overflow = el.dataset.oldOverflow;
  el.style.paddingTop = el.dataset.oldPaddingTop;
  el.style.paddingBottom = el.dataset.oldPaddingBottom;
 }
};

export default {
 name: "collapseTransition",
 functional: true,
 render(h, { children }) {
  const data = {
   on: Transition
  };
  return h("transition", data, children);
 }
};
2.vue 구성 요소 에 도입

<template>
  <div class="container">
    <button @click="isActive = !isActive">  /  </button>
    <collapse>
      <div class="container" v-show="isActive">
        <h2>      Pizza!</h2>
        <h5>         Pizza!</h5>
      </div>
    </collapse>
  </div>
</template>
<script>
import collapse from "../assets/js/collapse.js";
export default {
 data() {
  return {
   isActive: false
  };
 },
 components: {
  collapse
 }
};
</script>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Vue 2 감청 속성 변경 watch 의 인 스 턴 스 코드
JavaScript Canvas 인증 코드 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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