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 ...
随机推荐
- 一种算法的实现,几个相同大小的div组合在一起,判断是不是矩形
- bzoj1964: hull 三维凸包
传送门 二维平面四个点求凸包面积->任选三个点面积之和/2 三维平面五个点求凸包体积->任选四个点体积之和/2 二维平面三个点面积->二个二维向量行列式值的绝对值/2 三维平面四个点 ...
- CSS动画之旋转魔方轮播
很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...
- 测开之路七十八:shell之函数和参数
函数 function function_name(){ statement1 Statement2 .... statementn} function_name $var1 ...
- ETCD 简介及基本用法
ETCD 项目地址 ETCD 官方文档 1. 简介 ETCD 是一个高可用的分布式键值数据库,可用于服务发现.ETCD 采用 raft 一致性算法,基于 Go 语言实现. 特点 简单:安装配置使用简单 ...
- MD5加密 及 防止重复提交
1.JSP页面 <%@page import="cn.gs.ly.app2.MD5Util"%> <%@page import="java.util.U ...
- 浅谈JSONObject解析JSON数据
我们在做jmeter接口测试时能会用beanshell断言,一般都会将返回值转成JSONObject对象进行处理.本文选取较为复杂json格式数据,也将适用于java接口测试. JSON数据 { &q ...
- 【ABAP系列】SAP ABAP模块-memory内存数据传输的例子
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-memor ...
- Convolutional Neural Networks(5):Pooling Layer
池化层(Pooling layer)同样是收到了视觉神经科学的启发.在初级视觉皮层V1(Primary visual cortex)中,包含了许多复杂细胞(Complex cells),这些细胞对于图 ...
- Java8默认方法
Java8引入的接口默认方法实现一个新的概念.此功能是为了向后兼容性增加,使旧接口可用于利用JAVA8. lambda表达式的能力,例如,列表或集合接口不具备forEach方法声明.从而增加了这样的方 ...