Let's take a look at the prototype of the evil product
First look at the parameters of animate: $(selector).animate(styles,speed,easing,callback)
styles:必需参数,需要产生动画的css样式(使用驼峰式命名,即:marginLeft)
speed: 规定动画的速度
easing:动画速度(swing先慢后快,linear匀速)
callback:函数执行完之后的回调函数
Realization ideas:
1. Write two like html and styles, one is hidden
2. When clicked, one is unhidden, the other is set to absolute positioning, top up and opacity returns to 0
3. Both are num++ at the same time
ps: 不要用伪类 :active,因为那个只有一直按着动画才会继续的
Fake code:
差不多就得了哈,各自项目都不同,
$('点赞B').on('click',()=> {
//A停留在原地
$('点赞A ').removeClass('hidden').text('点赞A+1');
//B升天
$('点赞B').text('点赞B+1');
$('点赞B').animate({
//css属性是继承的而不是覆盖,也就是说你这里只需要写要变化的样式就行了
'top':'50px',
'opacity': '0'},1200,'linear');
});
I don’t need JQ, how can I do it in a vue project?
Get started with this knowledge
The essence of ref in vue is the same as JQ and getelementbyid. The
idea follows the above. . Put the code again when you have time. . . A little bit of water