vue-进入 离开&amp；列表过渡_列表进入 高开动画过渡可以使用的标记是( )

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

<button @click=“show = !show”>Toggle show

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.

JS代码

new Vue({
el: ‘#example-2’,
data: {
show: true
}
})

CSS代码

.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

**自定义过渡的类名**：  
 我们可以通过以下特性来自定义过渡类名：


* enter-class
* enter-active-class
* enter-to-class (2.1.8+)
* leave-class
* leave-active-class
* leave-to-class (2.1.8+)  
 自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用。

点我

学的不仅是技术，更是梦想！！！

**同时使用过渡和动画**：  
 Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。  
 但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。  
 **显性的过渡持续时间**：在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。  
 在这种情况下你可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

…

你也可以定制进入和移出的持续时间：

…

**JavaScript 钩子**：  
 我们可以在属性中声明js的钩子函数：

<transition
v-on:before-enter=“beforeEnter”
v-on:enter=“enter”
v-on:after-enter=“afterEnter”
v-on:enter-cancelled=“enterCancelled”

v-on:before-leave=“beforeLeave”
v-on:leave=“leave”
v-on:after-leave=“afterLeave”
v-on:leave-cancelled=“leaveCancelled”

JS代码：

// …
methods: {
// --------
// 进入中
// --------

beforeEnter: function (el) {
// …
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// …
done()
},
afterEnter: function (el) {
// …
},
enterCancelled: function (el) {
// …
},

// --------
// 离开时
// --------

beforeLeave: function (el) {
// …
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// …
done()
},
afterLeave: function (el) {
// …
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// …
}
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。


当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。


推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。  
 **初始渲染的过渡**  
 可以通过 appear 特性设置节点在初始渲染的过渡  
 语法如下：

### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)