我们在平常写动画的时候，经常会遇到元素的高度 height：auto或者 100% 时，无法触发过渡动画效果。这是浏览器一直存在的问题，这个问题最早可以追溯到距今2013年，可以说是由来已久的问题了。问题复现我们先来复现一遍这个问题。当我们将盒子的高度从 0 变成 auto 或者 100% 的时候， 盒子是没有过度动画的。显示得很生硬。不过我们可以使用其他的方式去使得这个过渡动画生效，方法有很多，
我们在日常编码的时候，隐藏一个 dom 元素有很多种方式，今天我们来盘点一下隐藏 dom 元素有哪些方式，最后一种，你绝对没有用过。display: none作为经常用来隐藏元素的 css 属性，display: none 相信大家并不陌生，使用了 display: none 会直接将元素从文档树中隐藏掉。一旦元素使用了 display: none 之后，这个元素就从文档树中隐藏掉了。visib
JavaScript 中的前瞻断言（lookahead）和后瞻断言（lookbehind）相信用过的小伙伴就知道它的威力了，在一些特定的需求场景下，可以做到四两拨千斤的作用，今天让我们来盘点一下在 JavaScript 正则表达式中这两个秘密武器吧。前瞻断言和后瞻断言，在其他语言的正则表达式中也存在，这个特性不是 JavaScript 的专属概念定义不管是前瞻断言还是后瞻断言，最终目的都是寻找在指
我们知道 Promise 一旦实例化之后，状态就只能由 Pending 转变为 Rejected 或者 Fulfilled， 本身是不可以取消已经实例化之后的 Promise 了。但是我们可以通过一些其他的手段来实现终止 Promise 的继续执行来模拟 Promise 取消的效果。Promise.race我们都知道 Promise.race 方法接收多个 Promise ，一旦这些 Prom
7月6日的 vue confg 大会上 ShenQingchuan 大佬介绍了他的 Vue Vine 项目， 一种全新定义 Vue 函数式组件的解决方案。 和 React 的函数式组件有异曲同工之妙，写起来直接起飞了。让我们来快速体验一下 vine， 看看到底给我们带来了哪些惊喜吧。前置准备安装开发依赖pnpm i -D vue-vine在 vite.config.ts 中导入插件：安装 vsco
2024年了相信大家都已经在日常开发的过程中使用上了 TypeScript 了。TypeScript 增强了代码可靠性和可维护性，确保减少运行时错误并提高开发人员的工作效率。TypeScript 通过类型声明 使得 javascript 拥有了强类型校验。而泛型的是类型声明中最重要的一环，通过运用 泛型， 可以让我们更好地扩展类型声明。今天我们来分析一下 TypeScript 泛型。什么是泛型我们
当你使用 Vue 编写单文件组件时，是否曾思考过如何使这些组件在代码维护上更加容易，而不会变成“堆屎山”？同时在面试中，面试官也常常会问我们如何保证自己编写的 Vue 组件易于维护。今天，我来谈谈我认为编写可维护组件的一些方法：合理使用 UI 组件提取必要的组件可以很好地将关注点分离。如果所有逻辑都堆在一个大组件中，会使得我们在定位问题时花费很长时间排除干扰项。我们来看一个示例：我们可以提取一个
瀑布流页面布局，故名思义就是页面上的元素子项像瀑布一样进行上下紧凑布局，一般图片类网站、电商类或者博客类的网站经常会使用这种布局，使得展示的元素比较紧凑和丰富， 类似下图这里总结一下瀑布流布局主要有以下特征：瀑布流布局的子项可以具有不同的高度，与标准网格相比，瀑布流布局看起来更自然。瀑布流布局可以适应不同的屏幕尺寸，会根据屏幕的尺寸动态调整布局的列数和子项的位置在几年前，我们要实现上述的特征的布局
随着 Vue 3 的 Composition API 风格的普及，使用 watch 的成本越来越低。现在，我们可以在任何地方使用 watch 来监听响应式数据。随着业务的推进，你可能会在代码中看到大量的 watch。当你接手修改这些充满 watch 代码时，我相信你心里肯定会感到非常困惑和无奈。真实案例剖析让我们来看一个真实的代码案例：在上面的示例中， dataList 在 template 中进
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
