<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. BZOJ 2726: [SDOI2012]任务安排 斜率优化 + 凸壳二分 + 卡精

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  2. luoguP3806 【模板】点分治1

    #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) #define ...

  3. Jenkins slave-agent.jnlp运行无反应

    在配置Jenkins的Windows节点时候,点击slave-agent.jnlp选择javaws.exe运行无反应,cmd命令执行javaws slave-agent.jnlp也不行,slave-a ...

  4. python3爬虫开发与实战预览版

    https://germey.gitbooks.io/python3webspider/content/1.2.3-ChromeDriver%E7%9A%84%E5%AE%89%E8%A3%85.ht ...

  5. Label设置行间距

    内容摘要 UILabel显示多行文本 UILabel设置行间距 解决单行文本 & 多行文本显示的问题 场景描述 众所周知,UILabel显示多行的话,默认行间距为0,但实际开发中,如果显示多行 ...

  6. day28-Javascript定时器的应用案例

    转行学开发,代码100天——2018-04-13 上篇文章中记录了定时器的用法,本篇通过两个常用案例进一步巩固定时器的应用. 案例一:消息框延时,如QQ中鼠标移动到头像,弹出一个信息框:移出后,消息框 ...

  7. HTML --JS 选择框

    <html> <head> <title>选择框</title> <script language="JavaScript"& ...

  8. JS对象—字符串总结(创建、属性、方法)

    1.创建字符串     1.1 new String(s)         String和new一起使用,创建的是一个字符串对象,存放的是字符串s的表示.     1.2 String(s)     ...

  9. Vue混入:基础

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能. 一 App组件 <template> <div id="app"> & ...

  10. Recurrent Neural Network(1):Architecture

    Recurrent Neural Network是在单个神经元上,除了输入与输出外,添加了一条Recurrent回路.也就是说,节点当前的状态将会影响其未来的状态.下式可以表征此关系: st= f(s ...