logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年

transition:自定义过渡类

  • 自定义transition的过渡类可以使用第三方动画效果,如animate.css。
  • 从该项目的远程仓库中找到animate.css样式表并复制内容。
  • 在本项目的src/app/styles下新建animate.css文件,并粘贴复制的内容。
  • 在app组件中导入新创建的animate.css样式表。
  • 修改transition组件的name属性值并自定义两个类名,例如"interactive class"和"leave active class",并设置相应的动画效果。
  • 在浏览器中刷新页面,点击按钮进行测试,可见定义的bounce动画效果,再次点击按钮时可见其他动画效果。