视频直播app源码，实现一个展开和关闭的动画效果

本文主要是介绍视频直播app源码，实现一个展开和关闭的动画效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

视频直播app源码，实现一个展开和关闭的动画效果

<template>
  <div>
    <el-button @click="changeShow(true)">展开</el-button>
    <el-button @click="changeShow(false)">关闭</el-button>
    <div class="mr_sty" :class="[{'animationWidth1':isShow === 1},{'animationWidth2':isShow === 2},{'animationWidth3':isShow === 3},{'animationWidth4':isShow === 4}]">
      <div style="width: 300px;height:100px;">
        你好你好你好
      </div>
    </div>
  </div>
 
</template>
 
<script>
  export default {
    data() {
      return {
        isShow: 1,
      }
    },
    methods: {
      changeShow(type) {
        //展开
        if (type) {
          this.isShow = 2
          setTimeout(() => {
            this.isShow = 3
          }, 3000)
        } else {
          //收起
          this.isShow = 4
          setTimeout(() => {
            this.isShow = 1
          }, 3000)
        }
      }
    }
  }
</script>
 
<style scoped>
 
  .mr_sty{
    overflow: hidden;
  }
  .animationWidth1{
    width: 0;
    height:0;
    background: red;
  }
  .animationWidth2{
    width: 300px;
    height:100px;
    background: red;
    position:relative;
    animation:animationWidth2 3s infinite;
    animation-iteration-count: 1;
  }
  @keyframes animationWidth2 {
    0%   {width:0}
    100% {width:300px}
  }
  .animationWidth3{
    width: 300px;
    height:100px;
    background: red;
  }
  .animationWidth4{
    width: 300px;
    height:100px;
    background: red;
    position:relative;
    animation:animationWidth4 3s infinite;
    animation-iteration-count: 1;
  }
  @keyframes animationWidth4 {
    0%   {width:300px}
    100% {width:0}
  }
</style>

​以上就是视频直播app源码，实现一个展开和关闭的动画效果， 更多内容欢迎关注之后的文章

这篇关于视频直播app源码，实现一个展开和关闭的动画效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！