<template>
<div class="home-main">
<div class="progress-main">
<div class="progress-content" :style="{width: width100}"></div>
</div>
</div>
</template> <script> export default {
name: 'home',
data() {
return {
width100: ,
};
},
mounted() {
setTimeout(() => {
this.width100 = '80%';
}, );
},
};
</script> <style lang="stylus" scoped>
.home-main
width %
height %
overflow hidden
position relative
.progress-main{
border-radius 100px
background-color #ebeef5
overflow hidden
position relative
width 200px
height 10px
margin 20px 20px
.progress-content{
position absolute
left
top
height %
background-color #409eff
border-radius 100px
transition width 1s ease
}
}
</style>

Vue 滚动条动画的更多相关文章

  1. 从零开始学 Web 之 Vue.js(五)Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. vue 的动画

    1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...

  3. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue的动画组件(transition)

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  5. vue学习指南:第十篇(详细) - Vue的 动画

    Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1.  .v-enter定义动画的开始状态 2.  .v-ente ...

  6. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  7. [原]浅谈vue过渡动画,简单易懂

    在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解

  8. Vue.js 动画

    transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理:     1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...

  9. vue过渡动画

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

随机推荐

  1. python网络编程之验证客户端链接的合法性

    六.socket的更多方法介绍 服务端套接字函数s.bind() 绑定(主机,端口号)到套接字s.listen() 开始TCP监听s.accept() b被动接收TCP客户的连接,(阻塞式)等待连接的 ...

  2. python 生成多维数组

    在刷题时用到了数组,因为不提供三方库所以不能使用Numpy.想如何通过python列表模拟数组. 第一种方法 """ 生成n*m的初始值为0的矩阵 "" ...

  3. js点击获取—通过JS获取图片的绝对对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示:  <!DOCTYPE html> <html lang="en"> <head> ...

  4. linux命令学习记录

    1.查看目录和文件大小 du -sh ./* du -sh * | sort -nr 这个排序不正常都是因为-h参数的原因 du -s * | sort -nr | head 选出排在前面的10个 d ...

  5. http请求方法,get 对比 post

    本文转自:http://www.w3school.com.cn/tags/html_ref_httpmethods.asp 两种最常用的 HTTP 方法是:GET 和 POST. 什么是 HTTP? ...

  6. P3956棋盘

    传送 这看起来有点像个搜索,那我们就用搜索试试. dfs?bfs? 其实都可以,但是窝只会dfs.. 既然这里要用dfs,那么就要把每次搜到(m,m)时,使用的金币数量进行比较,取最小值. 在搜索过程 ...

  7. 前端基础知识-----HTML

    一.HTML基础概述 HTML:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准语言.也就是一般我们在浏览器里看到的东西的书写格式,与 ...

  8. Altium Designer(AD)使用笔记

    在PCB中间打洞,螺丝孔等 制作PCB螺丝孔 1 在Keepout层首先绘制一个圆形(矩形): 2 在绘制PCB时,选中该图形,Tool>>Convert>>create bo ...

  9. Python的一些高级特性

    内容基本上来自于廖雪峰老师的blog相当于自己手打了一遍,加强加强理解吧. http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493 ...

  10. Linux多线程服务器端编程

    目录 Linux多线程服务器端编程 线程安全的对象生命期管理 对象的销毁线程比较难 线程同步精要 借shared_ptr实现写时拷贝(copy-on-write) 多线程服务器的适用场合与常用编程模型 ...