node.js里面的声明周期和animate.css动画

标签：life   beta   text   挂载   lin   生命周期   method   rem   nsf   

-->
<!-- <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>
// 引入动画
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>

node.js里面的声明周期和animate.css动画

标签：life   beta   text   挂载   lin   生命周期   method   rem   nsf   

原文地址：https://blog.51cto.com/14584021/2484286