내부주기 및 animate.css 애니메이션 Node.js를

1주기
<템플릿>
< "lifeinfo"DIV ID =>
<P> 구성 요소 라이프 사이클 </ P>
<버튼을 클릭 @ = "changeData"> 데이터 수정 </ 버튼>
<P> {{MSG}} </ P>
</ DIV>
</ 템플릿>
<스크립트>
내보내기 {기본
이름 : "lifeinfo"
beforeCreate는 () {
후킹 함수가 실행 어셈블리 이전에 초기화 //
을 console.log ( "초기화하기 전에");
},
만든 ( ) {
초기화 후에 조립 완료 // 수정
합니다 (CONSOLE.LOG) "초기화 이후";
},
데이터 () {
창 {
MSG "변경 전의 데이터"
}
}
방법 {
changeData () {
this.msg = "데이터 변형 후";
}
}
beforeMount () {
// 이전에 조립 장착
( "로딩 전에")를 CONSOLE.LOG;
}
마운트 () {
//는 조립 완료 마운트
; CONSOLE.LOG (이하 "완료"마운트)
}
beforeUpdate () {
전에 // 어셈블리의 변형 예에
CONSOLE.LOG ( "변경 전"this.msg)
}
업데이트 () {
조립 후 변형의 //
CONSOLE.LOG (this.msg "변형 후");
}
beforeDestroy () {
언로드 전에 성분 //
CONSOLE.LOG ( "언 로딩 전에");
}
파괴 () {
// 언로드 후 성분
( "언 후")를 CONSOLE.LOG;
}
};
</ script>
2. 애니메이션
의 <template>
<div ID = "animateinfo">
<! - <P> VUE 애니메이션 천이 </ P>
< 버튼 @ 전환> "changeStatus"를 클릭 = </ 버튼> ->
<!- 기본 페이드 인 페이드에 의해 제공됩니다
내 전이에 이름 속성 전이 요소 경우
사용자 지정 기본 사용자 이름에 해당하는 양자 택일 V- 전환

-->
<!-- <transition name="slide-fade">

  <div class="block" v-if="ischange">动画</div>
</transition>-->

<!-- <transition name="transform-top-fade">
  <div class="nav" v-show="ischange">标题</div>
</transition>-->

<!-- 
    动画可以通过上面的方式来写   也可以通过  transition  组件提供的自定义过渡类名称的属性来写动画
    enter-class
    enter-active-class
    enter-to-class

    leave-class
    leave-active-class
    leave-to-class

    name属性写  custom-classes-transition  系统的动画类名称

-->
<!-- 下面的这个动画  和  讲的自定义类属性无关 -->
<div class="menu" @touchstart="startinfo" @touchmove="moveinfo" @touchend="endinfo">
  <ul class="navlist" key="1" :style="`transform:translate(${translateX}px);`">
    <li>喜剧</li>
    <li>科幻</li>
    <li>动画</li>
    <li>动漫</li>
    <li>记录</li>
    <li>魔幻</li>
    <li>爱情</li>
  </ul>
</div>
<!-- 
   写自定义类动画
-->
<transition
  name="custom-classes-transition"
  enter-active-class="animateenter"
  leave-active-class="animateleave"
  enter-class="animateinfoenter"
  leave-to-class="animateinfoleave"
>
  <div class="menulist" @click="isshow=!isshow" v-show="isshow">我是一个组件</div>
</transition>

<!-- 用animate  css 结合使用transition 
1.安装animate.css
2.mainjs 文件里面进行引入
3.直接在transition组件上使用
-->
<button @click="isblock=!isblock">animate</button>
<!-- :duration  属性是设置进入和离开的动画时间   写一个值 两个动画时间一直  也可以分开写 -->
<transition
  name="custom-classes-transition"
  enter-active-class="animated slideInRight"
  leave-active-class="animated fadeOutDown"
  :duration="{enter:100,leave:100}"
>
  <div v-if="isblock">使用animate.css</div>
</transition>
<!-- 
    transition 组件有对应的钩子函数  可以在钩子函数里面写代码
    v-on  监听

    使用  过渡结合动画
    velocity-animate@beta
    1.安装  cnpm install --save-dev velocity-animate@be
    2.直接在那个组件里面使用 在哪引入

-->
<transition
  @before-enter="beforeenter"
  @enter="enter"
  @after-enter="afterenter"
  @before-leave="beforeleave"
  @leave="leave"
  @after-leave="afterleave"
>
  <div v-if="isblock">使用animate.css</div>
</transition>

</ DIV>
</ 템플릿>
<SCRIPT>
// 애니메이션 통합
벨로 시티 "속도 - 애니메이션"에서 가져 오기를,
수출 {기본
이름 : "animateinfo",
데이터 () {
반환 {
ischange : 사실에
의 startx : 널 (null),
EndX : 널 (null) ,
translateX 0,
SCW : 0
isshow : 참으로
isBlock : 참으로
}
}
(장착) {
; this.scw = window.screen.availWidth
},
{방법
(EL) beforeenter {
애니메이션 들어가기 전에 세트 // CSS 스타일
el.style.opacity = 0;
el.style.transformOrigin = "센터";
}
입력 (EL이 완료) {
CONSOLE.LOG ( "애니메이션 입력");
애니메이션의 구현의 완료 후 애니메이션 지연 디스플레이 및 가시성 콜백 함수의 종료 후 // 전체 옵션 루프 설정 루프 지연 설정
// 시간의 애니메이션 애니메이션 기간 완화 애니메이션 콜백이 시작되기 전에 시작
(속도를
EL을 ,
{불투명도 :. 1의 fontSize는 "30 픽셀"},
{
시간 : 1000,
지연 : 300,
시작 : () => {
을 console.log ( "애니메이션을 시작할 준비가되어 있습니다");
}
전체 : () => {
콘솔 .LOG ( "애니메이션 실행 완료");
}
}
);
(DONE); // 계속
,}
EL (afterenter) {
벨로 시티 (
EL,
{불투명도 :. 1의 fontSize는 "25 픽셀"색상 : "#의 C0C0C0" },
{DURATION 500}
)
CONSOLE.LOG () "애니메이션 입력 한 후";
}
beforeleave (EL)을 {
CONSOLE.LOG ( "애니메이션 ")를 떠나기 전에;
}
{남기기 (DONE EL)
벨로 시티 (EL {fontSize는 "40px"불투명도 :. 1}, {DURATION 1000})
벨로 시티 (
EL,
{fontSize는 0, 불투명도 : 0},
{지연 : 1000 DURATION 1000}
)
CONSOLE.LOG ( "애니메이션 거리");
}
afterleave (EL) {
CONSOLE.LOG () "애니메이션 떠난 후";
}
changestatus () {
this.ischange = this.ischange ;!
}
StartInfo (E) {
// 터치 시작
송출 터치 = e.touches]
= this.startx 터치 [0] .pageX;
}
moveinfo (E)는 {
// 터치 이동
하며 터치하자 = e.touches
this.endx을 터치 = [0] .pageX]
방향 // 분석 터치
this.translateX = 0;
IF (this.endx && this.startx) {
; this.startx - SX = this.endx하자
경우 (SX <0) {
this.translateX + = SX;
경우 (Math.abs (this.translateX)> this.scw - 490) {
this.translateX this.scw = - 490;
}
} 또 {
this.translateX + = SX;
경우 (Math.abs (this.translateX)> this.scw - 490) {
this.translateX = - (this.scw - 490);
}
}
}
}
endinfo (E) {
this.endx = NULL;
this.startx = NULL;
}
}
};
</ script>
<스타일>
/ .block {
폭 : 100 픽셀;
높이 : 100 픽셀;
국경 : 1 픽셀의 고체 # 000;
경계 반경 : 50 %;
텍스트 정렬 : 센터;
라인 높이 100 픽셀;
} /
/ * 클래스 애니메이션

시작 천이를 정의하는 V 입력 상태
상태의 V-활성 입력 효과가 취할 전이 상태를 정의하기 위해
V-두고 정의 상태부터 전이 가까이
V-떠나 활성 정의는 발효 전이 상태를 떠날
상태 V-떠나 간 전이의 좌단 정의
/
/ ., 슬라이드 페이드 - 액티브 입력합니다
. 슬라이드 페이드 휴가 액티브 {
전환 : 모든 LS를;
}
. 슬라이드 - 페이드 - 입력,
슬라이드 페이드 투 휴가 {.
변환 : translateX (40px)를 rotateZ ( 180도),
투명도 : 0;
}
.nav {
총수 : 상대;
폭 : 100 %
신장 30 픽셀,
좌 : 0]
위쪽 : 0;
테두리 : 1 픽셀의 고체 # C0C0C0;
}
.transform 셋톱 페이드 액티브 입력 {
전환 : 모든 0.3S EASE;
}
.transform 탑 - 페이드 휴가 액티브 {
전환 : 모두 1이 완화 된 아웃;
}
, .transform 정상은 페이드가 입력
.transform 탑 - 페이드 휴가-에 {
왼쪽 : 50 %;
맨 : -100px;
폭 : 100 픽셀;
불투명도 : 0;
} * /

/ 커스텀 컴포넌트 클래스 속성 전환 애니메이션에 따른 쓰기 /
.menu {
:; 100 % 폭
: 40px; 높이
라인 높이 : 40px;
테두리 : 1 픽셀 고체 # 000;
박스 사이즈 : 경계 박스;
오버플 : 숨김;
}
{.navlist
폭 : 490px;
오버 플로우 : 숨겨진;
전환이 : 선형 모든 0.1 초;
}
.navlist> {리
목록 스타일 : 없음;
플로트 : 왼쪽;
폭 : 70 픽셀;
}

.menulist {
총수 : 상대;
높이 : 100 픽셀;
폭 : 100 %;
왼쪽 : 0;
국경 : 1 픽셀의 고체 # 000;
}
.animateenter,
.animateleave {
전환 : 모든 0.8S 용이성에서 아웃;
}
.animateinfoenter,
.animateinfoleave {
불투명도 : 0;
폭 : 50 %;
왼쪽 : 25 %;
}
</ 스타일>