[游戏开发]vue使用动态样式实现css推拉动画

vue使用动态样式实现css推拉动画

原理

示例在vue架构下，主要使用css和:class实现，页面左右推拉，左右部分所占比例改变

主要使用css的transition属性

代码实现

<template>
  <div class="page-all">
    <el-col :class="{ all: mode, 'half-1': !mode }">
      <el-button @click="test()">xxx</el-button>
    </el-col>
    <el-col :class="{ none: mode, 'half-2': !mode }">2</el-col>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      mode: true,
    }
  },
  components: {},
  methods: {
    test() {
      this.mode = !this.mode
    },
  },
  mounted() {},
  computed: {},
  created() {},
  destroyed() {},
  watch: {},
}
</script>

<style scoped>
.page-all {
  height: 100%;
}
.all {
  /* float: left; */
  width: 100%;
  height: 100px;
  background: blue;
  transition: width 2s;
  -moz-transition: width 2s; /* Firefox 4 */
  -webkit-transition: width 2s; /* Safari and Chrome */
  -o-transition: width 2s; /* Opera */
}
.half-1 {
  background: blue;
  /* float: left; */
  width: 80%;
  height: 100px;
  transition: width 2s;
  -moz-transition: width 2s; /* Firefox 4 */
  -webkit-transition: width 2s; /* Safari and Chrome */
  -o-transition: width 2s; /* Opera */
}
.half-2 {
  background: yellow;
  /* float: right; */
  width: 20%;
  height: 100px;
  transition: width 2s;
  -moz-transition: width 2s; /* Firefox 4 */
  -webkit-transition: width 2s; /* Safari and Chrome */
  -o-transition: width 2s; /* Opera */
}
.none {
  background: yellow;
  /* float: right; */
  width: 0px;
  height: 100px;
  transition: width 2s;
  -moz-transition: width 2s; /* Firefox 4 */
  -webkit-transition: width 2s; /* Safari and Chrome */
  -o-transition: width 2s; /* Opera */
}
</style>

<style>
</style>

结果展示

参考链接

https://www.cnblogs.com/gopark/p/9361992.html
https://www.w3school.com.cn/cssref/pr_transition.asp