老师，transform和width做动画的时候有什么区别啊？？
来源：2-5 历史搜索
Syrena3447375
2020-03-29 19:10:59
为什么之前在主页点搜索框跳转到搜索页的时候是，动画用的是
.search-enter-active, .search-leave-active {
transition: all .3s;
}
.search-enter, .search-leave-to {
transform: translate(100%, 0);
}
不能用width??
.search-enter-active, .search-leave-active {
transition: width .3s;
}
.search-enter, .search-leave-to {
width: 100%;
}
然后这里删除历史搜索的时候动画用的是height
.historyItem {
&-enter-active,
&-leave-active {
transition: height 0.1s;
}
&-enter,
&-leave-to {
height: 0;
}
}
不能用transform？？
.historyItem {
&-enter-active,
&-leave-active {
transition: all 0.1s;
}
&-enter,
&-leave-to {
transform: translate(0, 50px);
}
}
2回答
-
同学你好，关于同学的疑问，解答如下：
1、transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
width 属性设置元素的宽度。如果换成同学写的width，那么页面就没有移动进来的效果，同学可以测试下哦。
关于transform 属性，之前的中有讲解，同学可以去回顾下知识，链接：https://class.imooc.com/course/764
2、删除历史搜索：如果换成transform: translate(0, 50px);那么又是另一种动画效果。
使用什么方式实现，主要还是看同学想要什么样的动画效果。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0 -
Syrena3447375
提问者
2020-03-29
translate是移动？？那search页面怎么会是移动进来的？？不是应该是width从0-100%吗？？
0
相似问题