H5ビジュアル最適化2.1（JQanimateアニメーション）、「いいね」のポップアップと非表示

邪悪な製品のプロトタイプを見てみましょう

最初にanimateのパラメーターを見てください：$（selector）.animate（styles、speed、easing、callback）

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

実現のアイデア：

1. htmlとスタイルのように2つ書きます。1つは非表示です
。2。クリックすると、1つは非表示になり、もう1つは絶対位置に設定され、上に表示され、不透明度は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プロジェクトでJQを実行するにはどうすればよいですか？

この知識を使い始める
vueでのrefの本質は、JQおよびgetelementbyidと同じです。
考え方は上記のとおりです。。時間があるときにコードをもう一度入れてください。。。少しの水