javascript动画操作

代码

代码如下(部分省略):

<template>
  <a-menu
    :default-selected-keys="['1']"
    mode="inline"
    theme="dark"
    :inline-collapsed="collapsed"
    style="height: 100%;display:flex;flex-direction:column"
    id="domMenu"
    @click="deliverAddress"
  >
    <a-menu-item class="rotate">
      <div
        style="background-color:#242A37;height:30px;width:100%;"
        @click.stop="toggleCollapsed"
        class="flex-c"
      >
      </div>
    </a-menu-item>
  </a-menu>
</template>

<script>
export default {
  props: {
    idDivProp: {
      type: String,
      default: () => {
        return ''
      },
    },
    distanceProp: {
      type: Number,
      default: () => {
        return 10
      },
    },
  },
  data() {
    return {
      collapsed: true,
      idDiv: this.idDivProp,
      distance: this.distanceProp,
    }
  },
  methods: {
    //   动画设置
    toggleCollapsed() {
      let id = this.idDiv //要移动的div的id
      let distance = this.distance //要移动的距离
      this.collapsed = !this.collapsed //侧边栏收缩和展开
      let angel = this.collapsed ? 90 : 0 //侧边栏图标赋值图标旋转角度
      let size = this.collapsed ? 20 : 30 //侧边栏图标赋值图标大小
      let width = this.collapsed ? 80 : 200 //侧边栏赋值宽度
      let bgColor = this.collapsed ? '#2F3A48' : '#FFFFFF05' //退出按钮背景颜色
      let domIcon = document.getElementById('iconChange')
      let domMenu = document.getElementById('domMenu')
      let domExit = document.getElementById('Exit')

      domIcon.style.transform = 'rotate(' + angel + 'deg)' // 旋转角度
      domIcon.style.transition = '0.5s'  // 变化时间
      domIcon.style.fontSize = size + 'px' // 字体大小变化
      domMenu.style.width = width + 'px'   // 宽度变化
      domExit.style['background-color'] = bgColor  // 颜色变化
      this.shiftRightDiv(id, distance)
    },

    //当收缩展开时,右侧的div层也开始动画
    shiftRightDiv(id, distance) {
      if (id != '') {
        let tmp = this.collapsed ? 0 : distance //右侧div移动距离
        let shiftContainer = document.getElementById(id)
        shiftContainer.style.transform = 'translate(' + tmp + 'px)'
        shiftContainer.style.transition = '5s'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
// 样式覆盖
// 修改侧边栏的动画时长
.ant-menu {
  transition-duration: 0.5s, 0.5s !important;
}

//重新设置icon的最小尺寸为0
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  min-width: 0px;
}

::v-deep.ant-menu-inline-collapsed .ant-menu-item-group-title {
  padding: 0px;
}
::v-deep .ant-menu-item-group-title {
  padding: 0px;
}
</style>

此处的 a-menu 组件来自于 ant-design-vue 框架

最后

相关的文献地址如下:

• vue过度动画的使用方法整理
• vue动画&过渡整理
• CSS Transform和动画

__EOF__

本文作者：damarkday知识库
本文链接：https://www.cnblogs.com/GoodMemoryBlog/p/14332732.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！