Question

我已阅读有关Vuejs动画的this official文档。但是使用它的css钩子，我只能使元素以淡入淡出和不同的持续时间出现/消失。

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

如何使用Vuejs Animation创建滑动效果？就像那个here一样。可能吗？请提供一些示例代码。

Answer 1

你绝对可以用VueJS做到这一点。看看下面的例子。您可以看到两个示例，一个是您的案例采用的代码（使其滑动）。另一个是简单的图像滑块，它以3秒的间隔循环遍历图像阵列。

这里要注意的重要一点是，我们将image元素包装在for循环中以强制元素被销毁，因为否则你的元素将不会从DOM中移除而不会转换（虚拟DOM）。

为了更好地理解VueJS中的过渡，建议您查看getting started guide - transition section。

＆＃13;

new Vue({
  el: '#demo',
  data: {
    message: 'Click for slide',
    show: true,
    imgList: [
    	'http://via.placeholder.com/350x150',
      'http://via.placeholder.com/350x151',
      'http://via.placeholder.com/350x152'
    ],
    currentImg: 0
  },
  mounted() {
  	setInterval(() => {
    	this.currentImg = this.currentImg + 1;
    }, 3000);
  }
})

＆＃13;

#demo {
  overflow: hidden;
}

.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}

.img-slider{
  overflow: hidden;
  position: relative;
  height: 200px;
  width: 400px;:
}

.img-slider img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right:0;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>VueJS 2.0 - image slider</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="slide">
        <p v-if="show">{{message}}</p>
      </transition>
      <h3>
        Img slider
      </h3>
      <transition-group tag="div" class="img-slider" name="slide">
      <div v-for="number in [currentImg]" v-bind:key="number" >
        <img :src="imgList[Math.abs(currentImg) % imgList.length]"/>
      </div>
      </transition-group>
     </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

＆＃13;

Answer 2

感谢上面的回答对我有很大帮助！由于原始示例的按钮可以双向滑动，我通过添加“下一个”和“上一个”按钮进行了一些改进。当按“上一个”时，我将动画交换为与之相反：

new Vue({
  el: '#demo',
  data: {
    back: false,
    currentIndex: 0
  },
  methods: {
    next(){
      this.back = false;
      this.currentIndex++;
    },
    prev(){
      this.back = true;
      this.currentIndex--;
    }
  },
})

#demo {
  overflow: hidden;
}

.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}

.slideback-leave-active,
.slideback-enter-active {
  transition: 1s;
}
.slideback-enter {
  transform: translate(-100%, 0);
}
.slideback-leave-to {
  transform: translate(100%, 0);
}

.div-slider{
  overflow: hidden;
  position: relative;
  height: 100px;
  width: 90%;
}

.div-slider .card {
  position: absolute;
  height: 100px;
  width: 90%;
  background-color: #60adff;
}

<!DOCTYPE html>
<html>
  <head>
    <title>VueJS 2.0 - image slider</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="demo">
      
      <h3>
        div slider
      </h3>
      <transition-group tag="div" class="div-slider" :name="back? 'slideback' : 'slide'">
       <div v-if="currentIndex === 0" key="1">
        <div class="card">
          DIV 1
        </div>
       </div>
       <div v-if="currentIndex === 1" key="2" >
        <div class="card">
          DIV 2
        </div>
       </div>
       <div v-if="currentIndex === 2" key="3" >
        <div class="card">
          DIV 1
        </div>
       </div>
      </transition-group>
      <button @click="prev()" >prev</button>
      <button @click="next()">next</button>
     </div>
     
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  </body>

</html>

使用Vuejs动画创建左侧滑动效果

2 个答案: