1 ciclo de vida
<Plantilla>
<div id = "lifeinfo">
<P> ciclo de vida del componente </ P>
<Botón @ Click = "changeData"> Modificar datos </ botón>
<P> {{mensaje}} </ P>
</ div>
</ Plantilla>
<script>
exportación {default
nombre: "lifeinfo",
beforeCreate () {
función de enganche ejecuta el montaje antes de la inicialización //
console.log ( "antes de la inicialización");
},
de Creación ( ) {
después de la inicialización se ha completado el montaje // modificado
( "después de la inicialización") la console.log;
},
datos () {
retorno {
MSG: "los datos antes de modificación"
};
},
Métodos: {
changeData () {
this.msg = "datos después de la modificación";
}
},
beforeMount () {
// antes del conjunto de montaje
console.log ( "antes de la carga");
},
Montado () {
El conjunto de montaje se completa //
console.log ( "el montaje es completado");
},
AntesDeActualizar () {
antes de la modificación del conjunto de //
console.log ( "antes de la modificación", this.msg);
},
Actualización () {
después del montaje de la // modificado
console.log ( "después de la modificación", this.msg);
},
beforeDestroy () {
antes de descargar el componente //
console.log ( "antes de la descarga");
},
destruido () {
// después de la descarga del componente
console.log ( "después de la descarga");
}
};
</ script>
2. animación
<Plantilla>
<div ID = "animateinfo">
<! - <P> transición animada VUE </ P>
< @ botón de clic = "changestatus"> cambiar </ botón> ->
<!- se proporciona de forma predeterminada se desvanecen se desvanecen
Si el componente de transición nombre del atributo a mi transición
correspondiente al nombre por defecto personalizada personalizada, alternativamente cambió 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>
</ Plantilla>
<script>
// incorporado Animación
de importación de la velocidad "Velocidad-Animate";
Exportación {default
nombre: "animateinfo",
de datos () {
retorno {
ischange: true,
el startx: null,
EndX: null ,
la translateX: 0,
SCW: 0,
isshow: true,
isBlock: true
};
},
Montado () {
; this.scw = window.screen.availWidth
},
{: Métodos
beforeenter (eL) {
set antes de entrar en la animación // estilo CSS
el.style.opacity = 0;
el.style.transformOrigin = "centro";
},
introducir (eL, HECHO) {
el console.log ( "animación introducir");
// ajustes de retardo de bucle conjunto de asa opción completos después del final de la función de devolución de llamada de retardo de visualización de animaciones y visibilidad después de la finalización de la ejecución de la animación
// comienzan antes del inicio de la devolución de llamada animación aliviar duración animado animado de tiempo
Velocidad (
EL ,
{Opacidad :. 1, el fontSize: "30px"},
{
DURACIÓN: 1000,
retardo: 300,
al comenzar: () => {
el console.log ( "animación está listo para comenzar");
},
completa: () => {
consola .log ( "ejecución de animación completa");
}
}
);
HECHO (); // continúan
},
afterenter (eL) {
la velocidad (
eL,
{Opacidad :. 1, el fontSize: "25px", color: "# C0C0C0" },
{DURACIÓN: 500}
);
"animación después de entrar en" la console.log ();
},
beforeleave (eL) {
el console.log ( "Antes de salir de Animación ");
}
Dejar (EL, hecho) {
la velocidad (EL, {la fontSize: "40px", Opacidad :. 1}, {DURACIÓN: 1000});
la velocidad (
EL,
{la fontSize: 0, Opacidad: 0},
{retardo: 1000, DURACIÓN : 1000}
);
la console.log ( "animación de distancia");
},
afterleave (eL) {
el console.log ( "animación después de salir");
},
changestatus () {
this.ischange = this.ischange ;!
},
la StartInfo (E) {
// empezar a tocar
la deje táctil = e.touches;
this.startx táctil = [0] .pageX;
},
moveinfo (E) {
// toque mover
el dejar táctil = e.touches;
this.endx = toque [0] .pageX;
dirección // Analizar pantalla táctil
this.translateX = 0;
IF (this.endx && this.startx) {
dejar que sx = this.endx - this.startx;
si (sx <0) {
this.translateX + = sx;
si (Math.abs (this.translateX)> this.scw - 490) {
this.translateX = this.scw - 490;
}
} Else {
this.translateX + = sx;
si (Math.abs (this.translateX)> this.scw - 490) {
this.translateX = - (this.scw - 490);
}
}
}
},
Endinfo (e) {
this.endx = null;
this.startx = null;
}
}
};
</ script>
<style>
/ .block {
anchura: 100px;
altura: 100px;
frontera: 1px solid # 000;
frontera de radio: 50%;
text-align: center;
line-height: 100px;
} /
/ * Animación Clase
v a introducir para definir la transición a partir estado
estado v-enter-activa para definir el estado de transición para tener efecto
v-leave-definen lejos de la transición a partir estado
definiciones v-licencia-activo salir del estado de transición en efecto
el estado de v-licencia-para definir el extremo izquierdo de la transición
/
/ . Slide-Fade-Active-Enter,
Slide-Fade-Dejar activo. {
transición: Todos los lS;
}
. Slide-Fade-Enter,
Slide-Fade-a-Dejar {.
Transformar: translateX (40px) rotateZ ( 180 grados);
Opacidad: 0;
}
.nav {
position: relative;
anchura: 100%;
altura: 30px;
izquierda: 0;
Top: 0;
frontera: 1px solid # C0C0C0;
}
.transform-Top-Fade-Active-Enter {
Transición: Todo 0.3s FACILIDAD;
}
.transform-Top-Fade-Dejar-Active {
transición: todos los 1s facilidad-in-out;
}
.Transform-top-fundido de entrar,
.transform-top-fade-dejar-a {
izquierda: 50%;
Arriba: -100px;
anchura: 100px;
opacidad: 0;
} * /
/ Escritura de acuerdo con la clase de componente transición atributo personalizado animación /
.menu {
width: 100%;
altura: 40px;
line-height: 40px;
frontera: 1px solid # 000;
Box-Dimensionamiento: Frontera-Box;
overflow: hidden;
}
{.navlist
ancho: 490px;
overflow: hidden;
Transición: lineal Todo 0.1s;
}
.navlist> {Li
-estilo de lista: ninguno;
un float: left;
ancho: 70px;
}
.menulist {
position: relative;
altura: 100px;
anchura: 100%;
la izquierda: 0;
frontera: 1px solid # 000;
}
.Animateenter,
.animateleave {
transición: toda facilidad 0,8s-in-out;
}
.Animateinfoenter,
.animateinfoleave {
opacidad: 0;
anchura: 50%;
izquierdo: 25%;
}
</ Style>