vue实现展开动画(Vue组件实现旋转木马动画)
类别:编程学习 浏览量:458
时间:2021-10-02 01:14:44 vue实现展开动画
Vue组件实现旋转木马动画本文实例为大家分享了Vue组件实现旋转木马动画的具体代码,供大家参考,具体内容如下
源码如下
<template> <li id="wrapper"> <transition-group name="list" tag="ul" mode="out-in"> <li v-for="(item,index) in piclist" :key="item.url" :style="config[index]"> <img :src="item.url"> </li> </transition-group> <a href="javascript:;" id="arrLeft" class="prev" @click="turnleft"></a> <a href="javascript:;" id="arrRight" class="next" @click="turnright"></a> </li> </template>
js:
export default { data() { return { piclist: [ { url: require("../image/pic1.png") }, { url: require("../image/pic2.png") }, { url: require("../image/pic3.png") } ], //文件图片配置 config: [ { position: "absolute", width: "400px", top: "20px", left: "50px", opacity: 0.2, zIndex: 2, transition: "1s" }, { position: "absolute", width: "800px", top: "100px", left: "200px", opacity: 1, zIndex: 4, transition: "1s" }, { position: "absolute", width: "400px", top: "20px", left: "750px", opacity: 0.2, zIndex: 2, transition: "1s" } ], previous: 0, now: Date.now() }; }, methods: { //实现点击按钮切换的动画,设置时间参数防止多次点击 turnleft: function() { this.now = Date.now(); if (this.now - this.previous > 1000) { this.config.push(this.config.shift()); this.previous = this.now; } }, turnright: function() { this.now = Date.now(); if (this.now - this.previous > 1000) { this.config.unshift(this.config.pop()); this.previous = this.now; } } } };
css:
* { margin: 0; padding: 0; } #wrapper { margin: auto; height: 500px; width: 79%; position: relative; } ul { list-style: none; } li img { height: 500px; width: 100%; } .prev, .next { position: absolute; height: 60px; width: 60px; border-radius: 50%; top: 50%; margin-top: -56px; overflow: hidden; text-decoration: none; background-color: aqua; z-index: 5; opacity: 1; } .prev { left: 0; } .next { right: 0; } .picleft { width: 400; top: 20; left: 50; opacity: 0.2; z-index: 2; } .piccenter { width: 800; top: 100; left: 200; opacity: 1; z-index: 4; } .picright { width: 400; top: 20; left: 750; opacity: 0.2; z-index: 2; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue怎么实现输入框(vue车牌输入组件使用方法详解)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue集成文件上传插件(vue 实现上传组件)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
热门推荐
- 如何认识服务器(关于Nginx、Apache、Tomcat三个WEB服务器的区别和认知)
- python怎么提取微信数据(使用Python+wxpy 找出微信里把你删除的好友实例)
- python爬虫request方法介绍(详解Python3网络爬虫二:利用urllib.urlopen向有道翻译发送数据获得翻译结果)
- django数据库查询条件(djang常用查询SQL语句的使用代码)
- xampp在什么操作系统中不能使用(xampp apache启动失效问题的解决方法)
- visual studio怎么连接数据库(使用Visual Studio Code连接MySql数据库并进行查询)
- python 百度搜索结果(Python模拟百度自动输入搜索功能的实例)
- phpstudy怎么配置php环境(使用phpStudy搭建php环境及安装各种php程序实战教程)
- js判断对象是否存在
- C# File类的操作
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9