Tabla de contenido
1. El componente de transición en vue
2. El componente de transición aplica transiciones CSS
(1) Número de unidades/transición de componente
(2) Transiciones de elementos múltiples
(3) Transiciones de componentes múltiples
prefacio
Nuestra serie de cinco minutos de vue es muy larga. Es una serie de artículos y blogs. Todos los días, actualizaremos lo que hemos aprendido. Si está interesado, puede hacer clic en Me gusta y seguir. Aprenderemos juntos. El blogger solo registra cada parte. Resume el conocimiento que has aprendido. Si no te gusta, no lo pulverices. No es fácil de resumir. Hay muchos puntos de vista relacionados en la estación C que son solo resúmenes.
Bueno, ahora podemos aprender sobre la transición de Vue. Vue proporciona muchos efectos de transición diferentes al insertar, actualizar y eliminar elementos DOM. Si aplica automáticamente clases en transiciones CSS, puede usar JavaScript en la función de enlace de transición para manipular directamente el DOM.
1. El componente de transición en vue
Vue proporciona este componente de transición, que puede agregar transiciones de elementos de entrada o salida a cualquier elemento y componente durante la representación condicional v-if, la visualización condicional v-show y los componentes dinámicos.
2. El componente de transición aplica transiciones CSS
Al aplicar transiciones CSS, el componente de transición agrega y elimina elementos en el momento adecuado. Nuestro componente de transición contiene las siguientes 6 categorías de transición;
- v-enter: Define que al ingresar a la transición, el elemento surte efecto antes de la inserción, y desborda el siguiente cuadro después de que se inserta el elemento.
- v-enter-active: en el momento de la definición, en el estado en el que está en vigor la transición, se aplica durante la fase de transición de entrada, es efectivo antes de que se inserte el elemento y se elimina una vez completada la transición.
- v-enter-to: define el estado final de entrada en la transición, que surte efecto en el siguiente cuadro después de que se inserta el elemento, y se elimina una vez que se completa la transición.
- v-leave: define el estado de inicio de la transición de abandono. Surte efecto inmediatamente cuando se activa la transición de abandono, y el siguiente cuadro se moverá fuera.
- v-leave-active: El estado cuando la transición que define la licencia está activa.
- v-leave-to: define el estado final de la transición de abandono.
De las seis clases de transición que hemos resumido, las tres primeras son clases de transición y las últimas tres son clases de transición.En el proceso de entrar o salir, las seis clases de transición se intercambian entre sí.
(1) Número de unidades/transición de componente
Solo se incluye un elemento en el componente de transición, y la transición se define cuando se inserta o elimina este elemento. Podemos echarle un vistazo con una sola línea de código:
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="guodu" id="game"/>
<label for="game">我已经知晓未成年人游戏时间公告</label>
<transition name="fade">
<p v-if="guodu"><button>开始游戏</button></p>
</transition>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{guodu:false}
});
</script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 2s;
}
</style>
</body>
</html>Resultado de la ejecución: podemos ver, pero haga clic para seleccionar la casilla de verificación "He estado al tanto del anuncio del tiempo de juego de los menores del rey", y luego nuestro "Juego de inicio" se desvanecerá en la página, pero cuando desmarquemos , "Start Game" desaparecerá de nuestra página.
Debido a que nuestro componente está configurado con name="fade", entonces podemos usar el prefijo de fade al definir el estilo, como .fade-enter en el código, etc. Después de definir el estilo, no hay necesidad de introducir manualmente En él, los componentes de transición pueden agregar y eliminar elementos de nuestro botón "Iniciar juego" a la perfección.
(2) Transiciones de elementos múltiples
El componente de transición contiene varios elementos que definen las transiciones cuando se insertan o eliminan. Echemos un vistazo al código. No necesitamos modificarlo, y otros códigos no necesitan ser modificados. Solo necesitamos modificarlo en el capítulo anterior de la parte de un solo elemento.
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="DGguodu" id="game"/>
<label for="game">我已经知晓未成年人游戏时间公告</label>
<transition name="fade" appear mode="out-in">
<p v-if="DGguodu" key="1"><button>开始游戏</button></p>
<p v-else key="2">先阅读公告后进行游戏</p>
</transition>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{DGguodu:false}
});
</script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 2s;
}
</style>
</body>
</html>resultado de la operación:
Cuando vemos los resultados anteriores, podemos entender por qué ocurren los resultados anteriores, porque configuramos la transición al atributo de modo de aparición, que se usa para configurar el nodo para aplicar el efecto de transición cuando se representa inicialmente. Cuando seleccionamos la casilla de reutilización, el párrafo "Leer primero..." se desvanecerá y "Comenzar el juego" se desvanecerá. Esto se debe a que configuramos el modo en out-in, y el atributo mode se usa para configurar el modo de transición.
(3) Transiciones de componentes múltiples
La transición de múltiples componentes es más simple que la transición de múltiples elementos, porque no usa el atributo clave cuando el elemento realiza la transición y solo necesita usar componentes dinámicos. Echemos un vistazo más profundo a los resultados del código de ejemplo:
Código de ejemplo:
(4) Lista de transición
La transición de lista utiliza el componente de grupo de transición. A diferencia del componente de transición, el componente de grupo de transición contiene más atributos, como: el atributo de modo no está disponible, solo se puede contener un atributo clave dentro y la transición css será fluida Se aplicará a elementos internos, renderizados como un elemento real. Echemos un vistazo a esta lista de transición a través del código:
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>列表过渡</title>
</head>
<body>
<div id="app">
<h1>2022届大学生新生入学登记：</h1>
<form>
<p><label for="name">姓名：</label>
<input type="text" v-model="stuInfo.name" id="name"></p>
<p><label for="xuehao">学号:</label>
<input type="xuehao" v-model="stuInfo.xuehao" id="xuehao"></p>
<p><button @click="add" type="button">添加</button></p>
</form>
<transition-group tag="ul" name="fade">
<li v-for="(item,index) in students" :key="item.xuehao">{
{index+1}}--{
{item.name}}--{
{item.xuehao}}<button @click="del(index)">删除</button>
</li>
</transition-group>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
stuInfo:{xuehao:" "},
students:[]
},
methods:{
add(){
this.students.push(this.stuInfo);
this.stuInfo={};
},
del(index){this.students.splice(index,1);}
}
});
</script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 2s;
}
</style>
</body>
</html>resultado de la operación:
Hemos establecido el componente de -group en tag='ul' aquí, de modo que el valor de atributo de xuehao en los datos de valor de atributo clave de cada elemento li de la lista garantiza que su valor de atributo es un atributo único. Los resultados son los anteriores, el efecto no es mucho que decir, todos pueden verlo.
3. Ganchos de JavaScript
La función de enlace de JavaScript se puede vincular mediante la instrucción v-on en el componente de transición. El ciclo de transición puede tener las siguientes funciones de enlace:
<transition v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterenter"
v-on:enter-cancelled="entercanclled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
</transition>Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>钩子函数实现动画</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="already" id="ck"/>
<label for="ck">我已经阅读了相关的报名需求</label>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="after-enter"
>
<p class="show" v-if="already"><button>确定报名</button></p></transition>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
already:false
},
methods:{
beforeEnter:function(el){
el.style="opacity:0";console.log("beforeEnter");
},
enter:function(el,done) {
el.offsetHeight;
el.style = "opacity:1";
console.log("enter");
done();
},
afterEnter:function(el){
console.log("afterEnter");
}
}
});
</script>
<style>
.show {
transition: all 2s;
}
</style>
</body>
</html>resultado de la operación:
Podemos ver que cuando hacemos clic en la casilla de verificación, "Confirmar registro" se mostrará lentamente, ¡y al desmarcarla no se desvanecerá!