1 lifecycle
<Template>
<div ID = "lifeinfo">
<P> component lifecycle </ P>
<Button @ the Click = "changeData"> Modify Data </ Button>
<P> {{MSG}} </ P>
</ div>
</ Template>
<Script>
Export {default
name: "lifeinfo",
beforeCreate () {
hooking function executes the assembly prior to initialization //
console.log ( "before initialization");
},
Created ( ) {
after initialization is completed assembly // modified
( "after initialization") the console.log;
},
data () {
return {
MSG: "data before modification"
};
},
Methods: {
changeData () {
this.msg = "data after modification";
}
},
beforeMount () {
// prior to the assembly mount
console.log ( "before loading");
},
Mounted () {
The mount assembly is completed //
console.log ( "the mount is completed");
},
beforeUpdate () {
prior to modification of the assembly //
console.log ( "before modification", this.msg);
},
Updated () {
after assembly of the modified //
console.log ( "after modification", this.msg);
},
beforeDestroy () {
before unloading the component //
console.log ( "before unloading");
},
Destroyed () {
// after unloading the component
console.log ( "after unloading");
}
};
</ Script>
2. animation
<Template>
<div ID = "animateinfo">
<- <P> VUE animated transition </ P>!
< button @ click = "changeStatus"> switching </ Button> ->
<!- is provided by default fade fade
If the name attribute transition component to my-transition
corresponding to the custom default custom name alternatively switched 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>
</ Template>
<Script>
// incorporated Animation
Import from the Velocity "Velocity-Animate";
Export {default
name: "animateinfo",
Data () {
return {
ischange: to true,
the startx: null,
EndX: null ,
the translateX: 0,
SCW: 0,
isshow: to true,
isBlock: to true
};
},
Mounted () {
; this.scw = window.screen.availWidth
},
{: Methods
beforeenter (EL) {
set before entering the animation // css style
el.style.opacity = 0;
el.style.transformOrigin = "Center";
},
enter (EL, DONE) {
the console.log ( "animation enter");
// complete option loop set loop delay settings after the end of the animation delay Display & Visibility callback function after the completion of the implementation of the animation
// begin before the start of the animation callback easing animate animate duration of time
Velocity (
EL ,
{Opacity:. 1, the fontSize: "30px"},
{
DURATION: 1000,
Delay: 300,
the begin: () => {
the console.log ( "animation is ready to start");
},
Complete: () => {
Console .log ( "animation execution complete");
}
}
);
DONE (); // continue
},
afterenter (EL) {
the Velocity (
EL,
{Opacity:. 1, the fontSize: "25px", Color: "# C0C0C0" },
{DURATION: 500}
);
"animation after entering" the console.log ();
},
beforeleave (EL) {
the console.log ( "Before leaving Animation ");
}
Leave (EL, DONE) {
the Velocity (EL, {the fontSize: "40px", Opacity:. 1}, {DURATION: 1000});
the Velocity (
EL,
{the fontSize: 0, Opacity: 0},
{Delay: 1000, DURATION : 1000}
);
the console.log ( "animation away");
},
afterleave (EL) {
the console.log ( "animation after leaving");
},
changestatus () {
this.ischange = this.ischange;!
},
the StartInfo (E) {
// start touch
the let Touch = e.touches;
this.startx Touch = [0] .pageX;
},
moveinfo (E) {
// touch moving
the let Touch = e.touches;
this.endx = touch [0] .pageX;
direction // Analyzing touchscreen
this.translateX = 0;
IF (this.endx && this.startx) {
let sx = this.endx - this.startx;
if (sx < 0) {
this.translateX += sx;
if (Math.abs(this.translateX) > this.scw - 490) {
this.translateX = this.scw - 490;
}
} else {
this.translateX += sx;
if (Math.abs(this.translateX) > this.scw - 490) {
this.translateX = -(this.scw - 490);
}
}
}
},
endinfo(e) {
this.endx = null;
this.startx = null;
}
}
};
</script>
<style>
/ .block {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
line-height: 100px;
} /
/ * Class animation
v-enter to define the transition starting state
state v-enter-active to define the transition state to take effect
v-leave-defined away from the transition starting state
v-leave-active definitions leave the state of transition into effect
the state of v-leave-to define the left end of the transition
/
/ . Slide-Fade-Active-Enter,
. Slide-Fade-Leave-Active {
Transition: All lS;
}
. Slide-Fade-Enter,
. Slide-Fade-to-Leave {
Transform: translateX (40px) rotateZ ( 180deg);
Opacity: 0;
}
.nav {
position: relative;
width: 100%;
height: 30px;
left: 0;
Top: 0;
border: 1px Solid # C0C0C0;
}
.transform-Top-Fade-Active-Enter {
Transition: All 0.3s EASE;
}
.transform-Top-Fade-Leave-Active {
transition: all 1s ease-in-out;
}
.transform-top-fade-enter,
.transform-top-fade-leave-to {
left: 50%;
top: -100px;
width: 100px;
opacity: 0;
} */
/ Write according to the custom component class attribute transition animation /
.menu {
width: 100%;
height: 40px;
Line-height: 40px;
border: 1px Solid # 000;
Box-Sizing: border-Box;
overflow: hidden;
}
{.navlist
width: 490px;
overflow: hidden;
Transition: Linear All 0.1s;
}
.navlist> {Li
List-style: none;
a float: left;
width: 70px;
}
.menulist {
position: relative;
height: 100px;
width: 100%;
left: 0;
border: 1px solid #000;
}
.animateenter,
.animateleave {
transition: all 0.8s ease-in-out;
}
.animateinfoenter,
.animateinfoleave {
opacity: 0;
width: 50%;
left: 25%;
}
</style>