vue4-过渡动画 组件 路由
过渡
类名
样式定义：
使用方法
事件
例子，小球购物车
51行：隐藏小球
<script> window.onload = function () {
let vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 注意：动画钩子函数的第一个参数：el，表示
// 要执行动画的那个DOM元素，是个原生的 JS DOM 对象
// 可以认为，el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el) {
// 表示动画入场之前，此时动画还未开始，可以在其中
// 设置元素开始动画之前的起始样式
// 设置小球开始动画之前的起始位置
el.style.transform = 'translate(0,0)';
},
enter(el,done) {
//没有实际效果，但不可缺少，可以理解为强制动画刷新
el.offsetWidth;//offsetHeight、offsetLeft等都可以
//表示动画，开始之后的样式，可以设置小球完成动画的结束状态
el.style.transform = 'translate(150px,500px)';
el.style.transition = 'all 1s ease';
// 这里的 done，其实就是 afterEnter 这个函数，
// 也就是说：done 是 afterEnter 函数的引用
done();
},
afterEnter(el) {
//表示动画完成之后小球的状态
// 使用 flag 标识符，来表示动画的切换；
// Vue 把一个完整的动画，使用钩子函数，拆分为了两部分；
// 对flag：第一部分 false -> true ; 第二部分 true -> false
// 这句话，第一个功能，是控制小球的显示与隐藏
// 第二个功能：直接跳过后半场动画，让 flag 标识符直接变为 false
// 当第二次再点击按钮的时候，flag = false -> true
this.flag = !this.flag;
}
}
});
}
</script>
---------------------
作者：肖ZE
来源：CSDN
原文：https://blog.csdn.net/lucky541788/article/details/83051324
版权声明：本文为博主原创文章，转载请附上博文链接！
组件
全局
创建组件方法1：
方式二
方式三## 私有组件
实例和组件的data不一样！！
为什么=>为了组件不共享数据
组件切换
方法一：v-if v-else
方法二： ：is=" ’ 组件名’ 或者绑定data "
组件切换可以加动画 mode属性
mode 能够使得动画前面的动画走了之后，后面的才出来，否则可能出现同时存在的现象。
组件传值
父→子 参数
传方法
show不能加括号，否则会标准调用后的返回值了
子→父 通过事件调用传方法
子组件：
vue 利用ref获取dom元素 获取子组件的属性和方法
路由
安装
1.全局安装，导入script 的url
2.webpack安装 模块化
模块化：例如基于webpack构建
Vue.use （VueRouter） 相当于把后者注册到Vue身上
使用
第一步导入包
一导入路径就会变成hash路由
第二部：
第三步：
第四步：
跳转
方式一：
方式二：router-link
方式三：
$.route.push()
redirect重定向
高亮
根据上面，可直接重新定义下面的样式：
方法二：
动画
传参 query param
query
param
路由嵌套
不要加斜杠！！
不用children，在外面定义的话，count组件会被那个组件给覆盖；
用children的话，就不会被覆盖
举例：实现景点布局
放三个组件
3.设样式
以上是 vue4-过渡动画 组件 路由 的全部内容， 来源链接： utcz.com/z/378439.html
