Vue 滚动条动画
<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 滚动条动画的更多相关文章
- 从零开始学 Web 之 Vue.js(五)Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue 的动画
1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue的动画组件(transition)
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...
- vue学习指南:第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...
- Vue.js动画在项目使用的两个示例
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
- Vue.js 动画
transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理: 1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
随机推荐
- [USACO2011 Feb]Best Parenthesis
Time Limit: 10 Sec Memory Limit: 128 MB Description Recently, the cows have been competing with stri ...
- atoi()和stoi()函数
C++的字符处理函数,把数字字符串转换成int输出 头文件都是#include<cstring> atoi()的参数是 const char* ,因此对于一个字符串str我们必须调用 c_ ...
- 让VirtualBox虚拟机实现开机自动后台运行
转至:http://www.cnblogs.com/top5/archive/2012/01/19/2326234.html 测试环境:Host OS: Windows 7 x64 Guest OS: ...
- [APIO2013]道路费用
题目描述 幸福国度可以用 N 个城镇(用 1 到 N 编号)构成的集合来描述,这些城镇 最开始由 M 条双向道路(用 1 到 M 编号)连接.城镇 1 是中央城镇.保证一个 人从城镇 1 出发,经过这 ...
- 冲刺CSP-S集训考试反思+其它乱写(密码私信)
RT.开坑. 10.1 开门黑23333. 放假回来稍困,而且感冒似乎愈加严重,导致我正常考试基本睁不开眼.一个小时勉强把题读懂,神志恍惚如斯. 看T2觉得估计又是各种推柿子堆定理的数学大题,写了个暴 ...
- springMvc中自定义bean转换接收前台传的参数
转载:https://blog.csdn.net/u013476435/article/details/81538099 因前端整体传参时,参数名都不是驼峰写法,类似 music_name,music ...
- 20190814 On Java8 第四章 运算符
第四章 运算符 优先级 程序员经常都会忘记其他优先级规则,所以应该用括号明确规定运算顺序. 赋值 基本类型的赋值都是直接的,而不像对象,赋予的只是其内存的引用.举个例子,a = b ,如果 b 是基本 ...
- 通过JS,用a标签代替form中的submit
---恢复内容开始--- 有时候在使用表单的时候,不一定会用到表单中的input_submit来提交表单数据,可能会用a.button等来代替 然后自然而然地想到了用JS中的提交表单数据的动作 < ...
- hive环境
一.hive安装部署 1.hive安装及配置 (1)解压apache-hive-1.2.1-bin.tar.gz到/opt/module/目录下面 tar -zxvf apache-hive-1.2. ...
- SR-IOV
SR-IOV 来源 http://blog.csdn.net/liushen0916/article/details/52423507 摘要: 介绍SR-IOV 的概念.使用场景.VMware 和 K ...