1声明周期
<template>
<div id="lifeinfo">
<p>组件的生命周期</p>
<button @click="changeData">修改数据</button>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: "lifeinfo",
beforeCreate() {
// 该组件初始化之前 执行的钩子函数
console.log("初始化之前");
},
created() {
//改组件初始化完成之后
console.log("初始化完成之后");
},
data() {
return {
msg: "修改之前的数据"
};
},
methods:{
changeData(){
this.msg="修改之后的数据";
}
},
beforeMount() {
// 该组件挂载之前
console.log("挂载之前");
},
mounted() {
// 该组件挂载完成
console.log("挂载完成");
},
beforeUpdate() {
// 该组件修改之前
console.log("修改之前",this.msg);
},
updated() {
// 该组件修改之后
console.log("修改之后",this.msg);
},
beforeDestroy() {
// 该组件卸载之前
console.log("卸载之前");
},
destroyed() {
// 该组件卸载之后
console.log("卸载之后");
}
};
</script>
2.动画
<template>
<div id="animateinfo">
<!-- <p>vue动画过渡</p>
<button @click="changeStatus">切换</button>-->
<!-- 默认提供的是fade 淡入淡出
如果transition 组件的name属性为my-transition
切换成对应自定义 自定义名称替换默认的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 监听
使用 过渡结合动画
[email protected]
1.安装 cnpm install --save-dev [email protected]
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>
// 引入动画
import Velocity from "velocity-animate";
export default {
name: "animateinfo",
data() {
return {
ischange: true,
startx: null,
endx: null,
translateX: 0,
scw: 0,
isshow: true,
isblock: true
};
},
mounted() {
this.scw = window.screen.availWidth;
},
methods: {
beforeenter(el) {
// 动画进入之前设置css样式
el.style.opacity = 0;
el.style.transformOrigin = "center";
},
enter(el, done) {
console.log("动画进入");
//option loop 设置循环的 delay 设置延迟时间 Display & Visibility 动画结束后设置的 complete 为动画执行完成之后的回调函数
//begin 是动画开始前的回调函数 easing 设置动画效果 duration 设置动画的时间
Velocity(
el,
{ opacity: 1, fontSize: "30px" },
{
duration: 1000,
delay: 300,
begin: () => {
console.log("动画准备开始");
},
complete: () => {
console.log("动画执行完成");
}
}
);
done(); //继续执行
},
afterenter(el) {
Velocity(
el,
{ opacity: 1, fontSize: "25px", color: "#c0c0c0" },
{ duration: 500 }
);
console.log("动画进入之后");
},
beforeleave(el) {
console.log("动画离开之前");
},
leave(el, done) {
Velocity(el, { fontSize: "40px", opacity: 1 }, { duration: 1000 });
Velocity(
el,
{ fontSize: 0, opacity: 0 },
{ delay: 1000, duration: 1000 }
);
console.log("动画离开");
},
afterleave(el) {
console.log("动画离开之后");
},
changeStatus() {
this.ischange = !this.ischange;
},
startinfo(e) {
//触屏开始
let touch = e.touches;
this.startx = touch[0].pageX;
},
moveinfo(e) {
//触屏移动
let touch = e.touches;
this.endx = touch[0].pageX;
//判断触屏的方向
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;
} /
/* 动画的类
v-enter 定义过渡开始状态
v-enter-active 定义过渡状态生效时状态
v-leave 定义离开过渡开始状态
v-leave-active 定义离开过渡生效时的状态
v-leave-to 定义离开过渡结束时的状态
/
/ .slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 1s;
}
.slide-fade-enter,
.slide-fade-leave-to {
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-enter-active {
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;
} */
/ 根据transition 组件的自定义类属性写动画 /
.menu {
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #000;
box-sizing: border-box;
overflow: hidden;
}
.navlist {
width: 490px;
overflow: hidden;
transition: all 0.1s linear;
}
.navlist > li {
list-style: none;
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>
原文地址：https://blog.51cto.com/14584021/2484286