vue动画 |
您所在的位置:网站首页 › css鼠标放上去图片旋转 › vue动画 |
目录 旋转动画 悬浮触发动画 方式一 :hover 样式选择器触发 方式二:@mouseenter 绑定鼠标移入事件触发 点击触发动画 三种动画综合使用的完整演示代码如下: 旋转动画 纯css即可实现丰富的动画,以旋转360度的动画为例,样式如下: 第1步——定义关键帧,取名为 rotate360,指定动画开始、动画中和动画结束时的样式,下方代码表示动画结束后,元素旋转360度 @keyframes rotate360 { 100% { transform: rotate(360deg); } }第2步——在 animation 样式中,使用自定义的关键帧名称,并指定动画持续时长,动画播放速度曲线,动画开始播放时间(动画延时) animation: rotate360 .5s ease-out 0s;为了方便后续动画控制,这里使用类名来包裹此动画样式 .rotate360 { animation: rotate360 .5s ease-out 0s; }致此,旋转动画定义完毕,更详细的关于css动画的定义,可以参考 https://blog.csdn.net/u013243347/article/details/79976352 悬浮触发动画 方式一 :hover 样式选择器触发最简单的悬浮触发动画的方式 .logo:hover{ animation: rotate360 .5s ease-out 0s; } 方式二:@mouseenter 绑定鼠标移入事件触发此时便需用到动态样式绑定,以图标为例: 通过改变变量 showAnimate 的值,来动态添加旋转动画的样式 rotate360 注意:部分动画不适用于行内元素,所以此处需添加样式,将图标转换为行内块级元素 .changeIcon { display: block; font-size: 30px }showAnimate 默认值为false data() { return { showAnimate: false } },当鼠标悬浮于元素上时,触发mouseenter事件,执行play方法 play() { this.showAnimate = true }, 点击触发动画也需用到动态样式绑定,通过 @click 绑定点击事件触发 注意:为了实现可多次点击,需在动画结束后,立马移除动画样式,所以还需绑定 @animationend 动画结束事件 methods: { play() { this.showAnimate = true }, reset() { this.showAnimate = false } } 三种动画综合使用的完整演示代码如下: 此范例,可实现天猫官网中,切换商家logo栏的动画特效 https://www.tmall.com
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |