Shulou(Shulou.com)06/02 Report--

This article is about how transition components in vue are used in projects. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Transtion in vue is an animation transition encapsulation component. In common situations, DOM wrapped in transition tags contains animation effects. The animation transition settings for the transition component are based on the transition property settings of css.

Single eject application

Note:

What is the name of name, then the following style class begins with

Use v-if to cooperate with the animation effect

Toggle hello

Export default {data () {return {show: true}},} .fade-enter-active,.fade-leave-active {transition: all .5s;} .fade-leave-to {opacity: 0; transform: translateX (20px);} .fade-enter {opacity: 0; transform: translateX (- 20px);} content switching control effect

Note:

Key: you can control the animation switch by switching the key value for any value. Components can be arbitrary or unchanged, and it is up to you to change. You can use component tags with is, or you can use v-if directly.

The component that binds the key needs to be set to absolute positioning, otherwise the switch will stutter. You can also set mode= "out-in" or mode= "in-out" before and after. It depends on your personal needs.

Component export default {data () {return {status: '1clients,}}, methods: {change () {if (this.docState =' 1') {this.docState ='2'} else {this.docState ='1'}} .fade-enter-active,.fade-leave-active {transition: all .5s } .fade-leave-to {opacity: 0; transform: translateX (20px);} .fade-enter {opacity: 0; transform: translateX (- 20px);} .position {position: absolute;} is used with animate framework

Be careful

The value of name must be set to: custom-classes-transition

Enter-active-class, leave-active-class to control the styles that appear and disappear

Toggle render hello

The page loads and executes the animation for the first time

Add appear to transition

Thank you for reading! On "how to use transition components in vue in the project" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.