transition d'état
Table des matières
Le système de transition de Vue fournit de nombreuses méthodes simples pour définir les animations d'entrée, de sortie et de liste. Qu'en est-il de l'animation de l'élément de données lui-même, tel que :
Nombres et opérations
affichage des couleurs
position du nœud SVG
taille de l'élément et autres attributs
ces données sont soit intrinsèquement stocké sous forme de valeur numérique, soit peut être converti en valeur numérique. Avec ces valeurs à l'esprit, nous pouvons combiner la réactivité et le système de composants de Vue et utiliser une bibliothèque tierce pour implémenter l'état de transition des éléments de commutation.
Animation du statut et auditeur
Grâce à l'auditeur, nous pouvons surveiller la mise à jour de la valeur de n'importe quel attribut numérique. Cela peut paraître abstrait, alors regardons d'abord un exemple utilisant GreenSock :
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="animated-number-demo">
<input v-model.number="number" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div>new Vue({
el: '#animated-number-demo',
data: {
number: 0,
tweenedNumber: 0
},
computed: {
animatedNumber: function() {
return this.tweenedNumber.toFixed(0);
}
},
watch: {
number: function(newValue) {
TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
}
}
})
Lorsque vous mettez à jour la valeur, l'animation est déclenchée. C'est une bonne démonstration, mais pour les valeurs qui ne peuvent pas être stockées directement comme les nombres, comme la valeur de color en CSS, à travers l'exemple suivant nous implémenterons un exemple via Tween.js et Color.js :
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>
<div id="example-7">
<input
v-model="colorQuery"
v-on:keyup.enter="updateColor"
placeholder="Enter a color"
>
<button v-on:click="updateColor">Update</button>
<p>Preview:</p>
<span
v-bind:style="{ backgroundColor: tweenedCSSColor }"
class="example-7-color-preview"
></span>
<p>{{ tweenedCSSColor }}</p>
</div>var Color = net.brehaut.Color
new Vue({
el: '#example-7',
data: {
colorQuery: '',
color: {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
tweenedColor: {}
},
created: function () {
this.tweenedColor = Object.assign({}, this.color)
},
watch: {
color: function () {
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween(this.tweenedColor)
.to(this.color, 750)
.start()
animate()
}
},
computed: {
tweenedCSSColor: function () {
return new Color({
red: this.tweenedColor.red,
green: this.tweenedColor.green,
blue: this.tweenedColor.blue,
alpha: this.tweenedColor.alpha
}).toCSS()
}
},
methods: {
updateColor: function () {
this.color = new Color(this.colorQuery).toRGB()
this.colorQuery = ''
}
}
}).example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
} 
Transition d'état dynamique
Tout comme le composant de transition de Vue, la transition d'état derrière les données sera mise à jour en temps réel, ce qui est très utile pour le prototypage. Lorsque vous modifiez certaines variables, même un simple polygone SVG peut produire de nombreux effets inimaginables.
Le code derrière la démo ci-dessus peut être lu en détail à travers ce violon.
Mettre les transitions dans les composants
Gérer trop de transitions d'état peut rapidement augmenter la complexité d'une instance ou d'un composant Vue Heureusement, de nombreuses animations peuvent être extraites dans des sous-composants dédiés.
Réécrivons l'exemple précédent :
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<div id="example-8">
<input v-model.number="firstNumber" type="number" step="20"> +
<input v-model.number="secondNumber" type="number" step="20"> =
{{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div>// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// 策略。
Vue.component('animated-integer', {
template: '<span>{{ tweeningValue }}</span>',
props: {
value: {
type: Number,
required: true
}
},
data: function () {
return {
tweeningValue: 0
}
},
watch: {
value: function (newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function () {
this.tween(0, this.value)
},
methods: {
tween: function (startValue, endValue) {
var vm = this
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween({ tweeningValue: startValue })
.to({ tweeningValue: endValue }, 500)
.onUpdate(function () {
vm.tweeningValue = this.tweeningValue.toFixed(0)
})
.start()
animate()
}
}
})
// 所有的复杂度都已经从 Vue 的主实例中移除！
new Vue({
el: '#example-8',
data: {
firstNumber: 20,
secondNumber: 40
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
}
})
Nous pouvons l'utiliser en conjonction avec des composants. Cette section parle de diverses stratégies de transition et du système de transition intégré de Vue. En bref, il n'y a pratiquement aucun obstacle à la réalisation des divers effets de transition.
Donnez vie au design
Une simple animation peut donner vie. Malheureusement, lorsque les concepteurs créent des icônes, des logos et des mascottes, ils sont souvent livrés sous forme d'images ou de SVG statiques. Ainsi, même si le chat poulpe de GitHub, l’oiseau de Twitter et de nombreux autres logos ressemblent à des êtres vivants, ils n’ont pas vraiment l’air vivants. Vue peut vous aider. Étant donné que la nature du SVG est constituée de données, nous n'avons besoin que d'exemples de ces animaux excités, réfléchissants ou alertes. Vue peut ensuite vous aider à réaliser l'animation de transition entre ces états pour créer votre page d'accueil, vos instructions de chargement et des invites plus émotionnelles. Sarah Drasner a montré la démo suivante, qui combine des changements d'état liés au temps et à l'interaction :
