vue 回到顶部简单动画效果

vue 回到顶部动画效果
html

<template>
<div id="toTop" @click="toTop"></div >
</template>

<script>let timer = null //定义初始值export default {props:{step:{   //此数据是控制动画快慢的type:Number,default:100}},data(){return{}},methods:{toTop(){ // 动画timer = setInterval(function () {let osTop = document.documentElement.scrollTop || document.body.scrollToplet ispeed = Math.floor(-osTop / 5)document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeedthis.isTop = trueif (osTop === 0) {clearInterval(timer)}},30)},},created(){let vm =this;window.onscroll=function(){if (document.documentElement.scrollTop>60) {vm.isActive=true;}else {vm.isActive=false;}}}}
</script>

vue 回到顶部简单动画效果相关推荐

前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
android app启动图片加动画效果,Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案...
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案大家在设计APP的末期,都会想给APP搞一些"花里胡哨"的特效来提高APP的B格.博主表示亲测有效 ...
回到顶部丝滑效果/指定位置下拉丝滑
回到顶部丝滑效果 let top = document.documentElement.scrollTop || document.body.scrollTop;// 实现滚动效果const time ...
VUE实现折叠展开动画效果
VUE实现折叠展开动画效果第一种情况:从中间向两边展开效果(水平缩放) .input-search {position: absolute;bottom: 8px;right: 0px;width: ...
vue 回到顶部效果
最终效果: 回到顶部按钮 BackToTop.vue组件: <template><transition :name="transitionName">< ...
仿百度糯米团顶部搜索栏动画效果
看到百度糯米6.7版本顶部搜索栏有个动画效果如下: 首先这不是个简单的缩放变宽的动画,因为里面的字体整体左移. 所以应该可以做成两个重叠的布局,上层的做左移动画,底层的右移动画. 反之就动画反过 ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
前端学习笔记7：响应式布局和简单动画效果
一.响应式布局当我们在利用浏览器的放大缩小的时候,经常会面临一些问题就是如何将浏览器中的内容缩放到我们适合观看的程度,这时候我们就引入一个概念叫做响应式布局(Responsive layout).它 ...
Visual C# 2005 - 利用程序代码制作简单动画效果
一般的 Windows Form 通常是运用各种控件来显示数据,然而如果您希望在窗体中加入特殊效果来凸显数据内容,那么图形与动画将是非常不错的选择. 一般来说,我们会使用 .Net Framework ...

vue 回到顶部简单动画效果

vue 回到顶部简单动画效果相关推荐

最新文章

热门文章