current position:Home>Vue packaging folding panel plus animation effect

Vue packaging folding panel plus animation effect

2022-05-15 02:02:50rojie0

Effect display
![ Insert picture description here ](https://img-blog.csdnimg.cn/5b02926e345d4d7dbcfe34e1556bcbb1.gif

1. newly build collapse.js Fold animation effects

const transitionStyle = '0.2s height ease-in-out'
const Transition = {
    
  // These hooks are vue in transiton Some hook methods for labels 
  beforeEnter(el) {
    
    el.style.transition = transitionStyle
    if (!el.dataset) el.dataset = {
    }

    el.style.height = 0
  },

  enter(el) {
    
    if (el.scrollHeight !== 0) {
    
      el.style.height = `${
      el.scrollHeight}px`
    } else {
    
      el.style.height = ''
    }
    el.style.overflow = 'hidden'
  },

  afterEnter(el) {
    
    el.style.transition = ''
    el.style.height = ''
  },

  beforeLeave(el) {
    
    if (!el.dataset) el.dataset = {
    }
    el.style.height = `${
      el.scrollHeight}px`
    el.style.overflow = 'hidden'
  },

  leave(el) {
    
    if (el.scrollHeight !== 0) {
    
      el.style.transition = transitionStyle
      el.style.height = 0
    }
  },

  afterLeave(el) {
    
    el.style.transition = ''
    el.style.height = ''
  }
}

export default {
    
  name: 'CollapseTransition',
  functional: true, // Indicates that this component is a pure function component , Only use props  There is no state within itself 
  render(h, {
           //render The first parameter of h function , To create virtual dom, The second parameter is context object , Everything the component needs is passed through this object 
    children
  }) {
    
    const data = {
    
      on: Transition
    }
    return h('transition', data, children) // The first parameter tag name , The second parameter is the attribute , The third parameter is vnode node 
  }
}


2. New component LjCollapse.vue Put it in components Under the document

<!--LjCollapse-->
<template>
  <div class="LjCollapse" :style="{ backgroundColor: bgColor, width: width }">
    <div class="LjCollapseHead" :style="{
    
        color: headColor,
        borderLeftColor: borderColor,
      }" @click="collapse = !collapse">
      <span>{
    {
     title }}</span>
      <span style="float: right">
        <i v-if="collapse" class="el-icon-arrow-down"></i>
        <i v-else class="el-icon-arrow-right"></i>
      </span>
    </div>
    <collapseTransition>
      <div v-if="collapse">
        <slot></slot>
      </div>
    </collapseTransition>

  </div>
</template>
 
<script>
import CollapseTransition from './collapse'
export default {
    
  name: "LjCollapse",
  components: {
    
    CollapseTransition
  },
  props: {
    
    title: {
    
      type: String,
      default: " title ",
    },
    headColor: {
    
      type: String,
      default: "orange",
    },
    borderColor: {
    
      type: String,
      default: "orange",
    },
    bgColor: {
    
      type: String,
      default: "rgba(41, 41, 41, 0.589)", // Light black 
      // default: "#253266b7",// Light blue 
    },
    width: {
    
      type: String,
      default: "100%",
    },
    isCollapse: {
    
      type: Boolean,
      default: true,
    },
  },
  data () {
    
    return {
    
      collapse: this.isCollapse,
    };
  },
  computed: {
    },
  created () {
     },
  mounted () {
     },
  filters: {
    },
  methods: {
    },
  watch: {
    },
};
</script>
 
<style  scoped>
.LjCollapse {
    
  margin: 10px 0;
  color: white;
  background-color: rgba(41, 41, 41, 0.589);
  padding: 10px;
}
.LjCollapseHead {
    
  line-height: 25px;
  border-left: 3px solid;
  font-weight: bold;
  padding-left: 10px;
  font-size: 15px;
  caret-color: transparent;
}
.el-icon-arrow-down {
    
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #ffa500;
  border-right: 2px solid #ffa500;
  transform: rotate(135deg);
  transition: all ease .1s;
}
.el-icon-arrow-right {
    
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #ffa500;
  border-right: 2px solid #ffa500;
  transform: rotate(45deg);
  transition: all ease .1s;
}
</style>

3. Use

<template>
  <div id="app">
    <LjCollapse title=" title 1" headColor="#151515" width="500px" bgColor="#fff" :isCollapse="false"  class="box" style="color:black;">
      <div> This is the content 1</div>
    </LjCollapse>
    <LjCollapse title=" title 1" headColor="#151515" width="500px" bgColor="#fff" :isCollapse="false"  class="box" style="color:black;">
      <div> This is the content 2</div>
    </LjCollapse>
    <LjCollapse title=" title 1" headColor="#151515" width="500px" bgColor="#fff" :isCollapse="false"  class="box" style="color:black;">
      <div> This is the content 3</div>
    </LjCollapse>

  </div>

</template>

<script>
import LjCollapse from './components/LjCollapse.vue' // Import components 
export default {
    
  name: 'App',
  components: {
    
    LjCollapse
  },
  data () {
    
    return {
    
      
    }
  },
}
</script>

<style  scoped>

 div {
    
 padding: 10px;
}
#app{
    
  overflow: hidden;
  background-color:rgb(237, 237, 237) ;
}
</style>>

copyright notice
author[rojie0],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120528099588.html

Random recommended