案例28. 组合:弹出菜单效果
案例来源:
网易云课堂-用户功能列表
案例效果:
- 鼠标移入头像前:(图3-1)
- 鼠标移入头像后:(图3-2)
案例描述:
鼠标移入用户头像时逐渐显示用户面板,鼠标移出时隐藏用户面板。
元件准备:
- 页面中:(图3-3)
包含命名:
- 组合(用于统一显示面板内所有内容):UserGroup
思路分析:
如果想让一组元件统一显示与隐藏,可以将这组元件进行组合或转换为动态面板,然后对组合或者面板进行可见性的动作设置。在这个案例中,这里我们通过组合来实现。
操作步骤:
1、选取所有需要统一显示或隐藏的元件,按快捷键<Ctrl+G>键将它们设置为同一组合,默认隐藏组合并命名组合;
2、为“头像”元件的【鼠标移入时】事件添加“用例1”,设置动作为【显示】组合“UserGroup”;设置{动画}为【逐渐】显示,{时间}为“500”毫秒;设置{更多选项}为【弹出效果】。
- 用例动作设置:(图3-4)