H5视觉优化2.1(JQanimate动画),点赞弹起消失

先看看万恶的产品原型图

在这里插入图片描述
先看animate的参数:
$(selector).animate(styles,speed,easing,callback)

styles:必需参数,需要产生动画的css样式(使用驼峰式命名,即:marginLeft)
speed: 规定动画的速度
easing:动画速度(swing先慢后快,linear匀速)
callback:函数执行完之后的回调函数

实现思路:

1.写两个点赞的html和样式,一个隐藏
2.点击时,一个取消隐藏,另一个设置absolute定位,top起来并且opacity归0
3.两者同时num++
ps: 不要用伪类 :active,因为那个只有一直按着动画才会继续的

伪代码:

差不多就得了哈,各自项目都不同,

$('点赞B').on('click',()=> {
    
    
		//A停留在原地
        $('点赞A ').removeClass('hidden').text('点赞A+1');
        //B升天
        $('点赞B').text('点赞B+1');
        $('点赞B').animate({
    
    
        	//css属性是继承的而不是覆盖,也就是说你这里只需要写要变化的样式就行了
            'top':'50px',
            'opacity': '0'},1200,'linear');
    });

不用JQ,我是vue项目怎么搞?

先入门这个知识
vue中的ref本质和JQ、getelementbyid是一样的
思路遵循上面。。有空再放代码把。。。有点水这篇

猜你喜欢

转载自blog.csdn.net/weixin_45629623/article/details/113748334