您的位置:首页 > 编程学习 > > 正文

vue实现展开动画(Vue组件实现旋转木马动画)

更多 时间:2021-10-02 01:14:44 类别:编程学习 浏览量:458

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 旋转木马
    您可能感兴趣