undefinedfix
Sign in

How to move the page from the right side of the browser after clicking Vue element?

Brad edited in Sat, 03 Sep 2022

See this project on gitee, demo (http :// demo9 . 5kcrm . net)


Question: in the customer page, after clicking the customer name, you will move to the specific content page from the right side of the browser. You can see that the style should also use element. I don't know if it is implemented by dialog component? Or did you write your own page? Including the effect of page moving in, I don't know how to achieve it?


design sketch:

图片描述


Supplementary questions:

Try to write down, can achieve horizontal movement, but the effect of the demonstration station is different, do not know how to solve?

The specific codes are as follows:

//子组件
<transition name="slide-fade">
   <details v-if="show" :visible="Visible"></details>
</transition>

//动画样式
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
  -webkit-transform: translateX(100%); 
}
.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}

The effect picture is as follows:

6 Replies
thexiv
commented on Sun, 04 Sep 2022

The laxative can't see the Vue source code, and the vuedevtool can't monitor the vuecomponent, so the project is packaged online. From the effect and code point of view, the transition name is used, the slide fade effect is used, and the 100% width is translated in 0.35 seconds. It is completed through the custom enter / leave style. The official document has instructions: link description

user611811
commented on Sun, 04 Sep 2022

Take a look at the transition tag of Vue

Dharmaraj
commented on Sun, 04 Sep 2022

Source code should have written it, look at the source code directly

okgym
commented on Sun, 04 Sep 2022

If you look at it a little bit, you should use El card and a transition animation. I feel that this thing should be developed with element admin. The effect is very similar to that of the example site of element admin. Click the pinion on the right.

cashsavings
commented on Sun, 04 Sep 2022

Using the drawer component , direction= ' rtl ' modal = false

zsupz
commented on Sun, 04 Sep 2022

Hello, what is the realization idea of this? Now I also encounter this problem. Vue beginner is the only one who doesn't know how to solve it.

lock This question has been locked and the reply function has been disabled.