百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

2.7.1 使用s-transition指令实现过渡动画

进阶

人数47人在学习该课程,有23人已经完成该课程

时间平均用时0.8

课程概述

作业提交截止时间:09-01

任务目的

  • 学习并实践CSS过渡动画的使用方法
  • 学习如何在San中使用s-transition指令实现过渡动画

任务描述

已知 san 组件:

<template>
<div>
  <button on-click="toggle">TOGGLE</button>
  <span s-if="show" s-transition="hook">
    Transition Layer
  </span>
</div>
</template>

<script>
export default {
  initData() {
    return {show: true};
  },
  toggle() {
    this.data.set(!this.data.get('show'));
  },
  hook: {/* your answer */}
}
</script>

<style>
.enter, .leave {
  transition: all .5s;
}

.before-enter, .leave {
  opacity: 0;
}

.enter, .before-leave {
  opacity: 1;
}
</style>

实现该组件的 hook 成员,利用 s-transition 指令抽象已知组件样式中定义的四个 CSS 钩子达到以下效果:
点击按钮时,组件的 span 元素执行淡入 / 淡出的动画。

注意事项

  • 使用s-transition指令实现这一效果

在线学习资料

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~