Home > Article > Web Front-end > How to use vue's transition to complete sliding transition

How to use vue's transition to complete sliding transition

不言Original: 2018-06-26 09:38:162763browse

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>

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!

php transform transition

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JS to implement WeChat payment pop-up functionNext article：How to use JS to implement WeChat payment pop-up function

See more

How to use vue's transition to complete sliding transition

Related articles