How to move the page from the right side of the browser after clicking Vue element?
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:
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
Source code should have written it, look at the source code directly
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.
Using the drawer component , direction＝ ' rtl ' modal = false
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.