<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. 【説明する】DS

    其实就是数据结构课后题整理....只会一个是什么鬼 染色问题: 线段树? 功能太强大了! 我们并不需要那么多的功能 运用并查集!!! 将相同的并为一段 BZOJ 2375(讲真我没找到这个题在哪里.. ...

  2. React准备工作

    一.环境准备 使用react官方推荐的脚手架create-react-app 1.安装nodejs 2.npm install -g create-react-app  //全局安装脚手架 3.cre ...

  3. 后端技术杂谈9:先搞懂Docker核心概念吧

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  4. java sftp.exec无法执行mv命令

    编写java程序过程中,sftp上传下载建目录删除文件都可以,就是备份不行. 分析原因如下: 1.如果用的同一个用户,即sftp用户来通过 exec(ssh连接) 执行mv命令,那极有可能是在搭建sf ...

  5. 测开之路七十六:性能测试蓝图之html

    <!-- 继承base模板 -->{% extends 'base.html' %} {% block script %} <!-- 从cdn引入ace edter的js --> ...

  6. 关于 推广QQ

    有一个项目 需要在用户提交表单之后,关闭页面,微信公众号发送一个模板消息,链接地址为qq推广的链接. 早上在试 先是在电脑端测试都是正常的. 然后开始上传到服务器端测试,发送模板消息之前的动作,都没有 ...

  7. (转载)Java 8 认识 HashMap

    原链接:传送门 摘要 HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型.随着JDK(Java Developmet Kit)版本的更新,JDK1.8对HashMap底层的实 ...

  8. mysql行锁和死锁检测

    行锁顾名思义,就是针对单行数据加锁,在mysql中,锁的实现是由引擎层实现的,MyISAM引擎就不支持行锁 不支持行锁就意味着并发控制只能使用表锁,也就是说同一时间,在这个表上只能有一个更新在执行,这 ...

  9. Spring-Cloud-Alibaba-Nacos 目录

    Spring-Cloud-Alibaba-Nacos 目录 学习资料 Nacos 官网(https://nacos.io/zh-cn/docs/what-is-nacos.html) Nacos 程序 ...

  10. 【xinsir】githook之precommit分享

    钩子类型 使用node编写githook,以pre-commit为例: 1.在项目下配置自动生成pre-commit文件,一般可以在启动项目的脚本下添加: modifyPreCommit: funct ...