VUE：过渡&动画
vue动画的理解
1）操作css的 trasition 或 animation
2）vue会给目标元素添加/移除特定的class
3）过渡的相关类名
xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter/xxx-leave-to：指定隐藏时的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_过渡&动画</title>
<style>
/* 显示或隐藏的过滤效果 */
.xxx-enter-active,.xxx-leave-active{
transition: opacity 1s;
}
/* 隐藏时的样式 */
.xxx-enter,.xxx-leave-to{
opacity: 0;
}
/* 显示的过滤效果 */
.move-enter-active{
transition: all 1s;
}
/* 隐藏的过滤效果 */
.move-leave-active{
transition: all 3s;
}
/* 隐藏时的样式 */
.move-enter,.move-leave-to{
opacity: 0;
transform: translateX(20px);
}
</style>
</head>
<body>
<!--
1.vue动画的理解
操作css的trasition或animation
vueh会给目标元素添加/移除特定的class
2.基本过渡动画的编码
1）在目标元素外包裹<transition name="xxx"></transition>
2）定义class样式
1>.指定过渡样式:transition
2>.指定隐藏时的样式:opacity/其他
3）过渡的类名
xxx-enter-active：指定显示的transition
xxx-leave-active：指定隐藏的transition
xxx-enter：指定隐藏时的样式
-->
<div id="test1">
<button @click="isShow=!isShow">toggle</button>
<transition name=‘xxx‘>
<p v-show="isShow">hello</p>
</transition>
</div>
<div id="test2">
<button @click="isShow=!isShow">toggle</button>
<transition name=‘move‘>
<p v-show="isShow">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el:‘#test1‘,
data(){
return {
isShow:true
}
}
})
new Vue({
el:‘#test2‘,
data(){
return {
isShow:true
}
}
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/it-taosir/p/9961105.html
时间： 2024-11-05 21:33:39