<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. php str_ireplace()函数 语法

    php str_ireplace()函数 语法 作用:字符串替换操作,不区分大小写 语法:str_ireplace(find,replace,string,count)大理石平台规格 参数: 参数 描 ...

  2. [CF959C]Mahmoud and Ehab and the wrong algorithm

    解法 很简单对于n<=5举不出反例 如果n>5的话2,3,4好点连1,其他点连2 对于正面例子 直接所有点连1号点 其实就是结论题 代码: #include <cstdio> ...

  3. [CF846C]Four Segments题解

    我们暴力枚举一下\(delim_{1}\) 然后对于每个\(delim_{1}\),O(n)扫一遍+前缀和求出最大\(delim_{0}\)和\(delim_{2}\),然后记录一下它们的位置就行啦 ...

  4. 用soapUI开发webservice接口

    1,下载soapUI软件,安装到本地 2,打开soapUI软件 3,创建一个开发好的接口 4,进行接口调用 测试:

  5. MapGIS IGServer for java

    但是安装完之后,服务里面没有找到igserver服务 IGServer SManager cxf 怎么会找不到类呢?是服务映射出了问题,所以目录找不到.所以怎么配置目录呢?是在xml还是环境变量,还是 ...

  6. Linux系统中imp导入dmp文件

    [oracle@ocm1 ~]$ lltotal 32-rw-r--r-- 1 oracle oinstall 24576 Mar 27 15:26 COUNTRIES.dmpdrwxr-xr-x 2 ...

  7. PHP实现多服务器SESSION共享

    为什么要session共享? 现在稍微大一点的网站基本上都有好几个子域名,比如www.feiniu.com, search.feiniu.com, member.feiniu.com,这些网站如果需要 ...

  8. 通过 homebrew下载速度过慢的解决方案

    请移步 https://www.cnblogs.com/jingxiaoniu/p/11123377.html 进行操作

  9. PHP垃圾回收深入理解

    转摘于http://www.cnblogs.com/lovehappying/p/3679356.html PHP是一门托管型语言,在PHP编程中程序员不需要手工处理内存资源的分配与释放(使用C编写P ...

  10. http预请求 options

    问题 使用axios请求接口时,出现了发出两次请求的情况:一个是请求OPTIONS,一个是正常的POST请求:查资料发现与跨域请求有关. 概念 MDN中有提到: 出于安全原因,浏览器限制从脚本内发起的 ...