Question

我正在尝试创建一个侧边栏，该边栏可以通过单击触发元素来滑入和滑出。触发元件应粘贴在侧栏上。但是，在我当前的小提琴中，触发元素仅在侧边栏完成其过渡后才更改位置。

如何完成预期的行为？

new Vue({
  el: "#app",
  data: {
    exposed: true
  }
})

.sidebar {
  width: 200px;
  height: 200px;
}

.toggler {
  height: 30px;
}

/**********************
 * Transition classes *
 **********************/
.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(-200px, 0);
}
.slide-leave-to {
  transform: translate(-200px, 0);
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app" class="px-0 py-4">
  <div class="d-flex">
  
    <!-- Sidebar content -->
    <transition name="slide">
      <div v-if="exposed" class="sidebar bg-dark text-white p-1">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </transition>
    
    <!-- Sidebar toggler -->
    <div class="toggler px-2 bg-secondary">
      <a href="#" v-on:click="exposed = !exposed" class="text-white">
        <span v-if="exposed">[X]</span>
        <span v-else>(?)</span>
      </a>
    </div>
    
  </div>
</div>

jsfiddle

Answer 1

我做了一些小的CSS更改，如下所示

.slide-enter {
  margin-left:-200px;
}

.slide-enter-to {
  margin-left:0px;
}

.slide-leave-to {
  margin-left:-200px;
}

请检查是否有效。 https://jsfiddle.net/z43xug9n/3/

Answer 2

如果要同时滑动侧边栏和切换开关，最好滑动其父级（容器）。

https://jsfiddle.net/4mju0rzt/31/

<div id="app">
    <div v-bind:class="{'minimized': hide}" class="sidebar-container">
        <div class="sidebar bg-dark text-white p-1">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <!-- Sidebar toggler -->
        <div class="toggler px-2 bg-secondary">
            <a href="#" v-on:click="hide = !hide" class="text-white">
                <span v-if="!hide">[X]</span>
                <span v-else>(?)</span>
            </a>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            hide: false
        }
    })
</script>

Answer 3

找到了Velocity.js的解决方案。诀窍是将侧边栏移开，而不是将其从DOM中删除。

new Vue({
  el: "#app",
  data: {
    exposed: true
  },
  methods: {
  	slideIn (el, done) {
    	Velocity(el, {
        marginLeft: 0
      }, {
        duration: 500
      }, {
        complete: done
      });
    },
    
    slideOut (el, done) {
    	Velocity(el, {
        marginLeft: -200
      }, {
        duration: 500
      }, {
        complete: done
      });
    }
  }
})

.sidebar {
  width: 200px;
  height: 200px;
}

.toggler {
  height: 30px;
  width: 36px;
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="px-0 py-4">
  <div class="d-flex">
  
    <!-- Sidebar content -->
    <transition v-on:enter="slideIn" v-on:leave="slideOut">
      <div v-show="exposed" id="sidebar" class="sidebar bg-dark text-white p-1">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </transition>
    
    <!-- Sidebar toggler -->
    <div class="toggler px-2 bg-secondary">
      <a href="#" v-on:click="exposed = !exposed" class="text-white">
        <span v-if="exposed">[X]</span>
        <span v-else>(?)</span>
      </a>
    </div>
    
  </div>
</div>

如何同时转换两个元素？

3 个答案: