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

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

1

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

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