How to use vue's transition to complete sliding transition-JS Tutorial-php.cn

How to use vue's transition to complete sliding transition

不言

Release： 2018-06-26 09:38:16

Original

2808 people have browsed it

This article mainly introduces the sample code for using vue's transition to complete the sliding transition. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

It is very convenient to use vue to create some small animation effects. Today I want to use vue’s transition to complete a sliding transition effect. I will share it with you here.

Go directly to the source code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue滑动效果</title>
  <style>
    .d {
      position: absolute;
      border: 1px solid red;
      width: 30px;
      height: 30px;
    }
    @keyframes show {
      0% {
        opacity: 0;
        left: 32px;
      }
      100% {
        opacity: 1;
        left: 0;
      }
    }
    @keyframes hide {
      0% {
        opacity: 1;
        left: 0;
      }
      100% {
        opacity: 0;
        left: -32px;
      }
    }
    .show-enter-active {
      animation: show 1.2s;
    }
    .show-leave-active {
      animation: hide 1.2s;
    }
    .show-enter, .show-leave-to {
      opacity: 0;
    }
    .wrap {
      position: relative;
      width: 32px;
      height: 32px;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <p>{{ message }}</p>
  <p class="wrap">
    <transition name="show">
      <p class="d" v-for="item in list" :key="item.id" v-if="count === item.id">
        {{ item.text }}
      </p>
    </transition>
  </p>
  <button @click="add">add</button>
</p>

<script>
  new Vue({
    el: &#39;#app&#39;,
    data () {
      return {
        message: &#39;Hello Vue.js!&#39;,
        count: 0,
        list: [
          {id: 0, text: &#39;aaa&#39;},
          {id: 1, text: &#39;bbb&#39;},
          {id: 2, text: &#39;ccc&#39;}
        ]
      }
    },
    methods: {
      add: function () {
        if (this.count < this.list.length - 1) {
          this.count += 1;
        } else {
          this.count = 0;
        }
      }
    }
  })
</script>
</body>
</html>

Copy after login

What needs to be noted here is that the parent uses relative, and the child uses absolute for positioning, using the left value to perform position control movement. If you use transform here, since the previous p has a gradual disappearance process, its position will always exist during this process, causing the subsequent p to be unable to move to the corresponding position correctly, so it is better to use absolute.

If it doesn't work, you can use the mode attribute of the transition and set it to out-in. Let the former complete the animation first, so that the occupied position completely disappears so that the next p can move normally. However, this method only Animations can be completed one after another, but not at the same time.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement image cropping component using Vue mobile terminal

How to implement data request display in vue2 loading diagram

In vue about how to use the scoped attribute of style

The above is the detailed content of How to use vue's transition to complete sliding transition. For more information, please follow other related articles on the PHP Chinese website!