Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
CSS转换不使用transform:translate_Css_Animation_Sass_Css Transitions - Fatal编程技术网
Fatal编程技术网
  • css/
  • CSS转换不使用transform:translate

CSS转换不使用transform:translate

css animation sass

CSS转换不使用transform:translate,css,animation,sass,css-transitions,Css,Animation,Sass,Css Transitions,如何实现移动菜单的平稳过渡 transform属性正在工作，但我希望它能够缓慢进行 我的无礼看起来像这样 .mobile-nav display: none position: relative width: 100% background: $white padding: 30px 0 20px transform: translateY(-100%) @media (max-width: 775px) .mobile-nav.is-

如何实现移动菜单的平稳过渡

transform
属性正在工作，但我希望它能够缓慢进行

我的无礼看起来像这样

  .mobile-nav
   display: none
   position: relative
   width: 100%
   background: $white
   padding: 30px 0 20px
   transform: translateY(-100%)

    @media (max-width: 775px)
     .mobile-nav.is-o
      display: block
      transform: translateY(0%)
您面临的主要障碍是
display
属性无法设置动画

与电灯开关一样，
display:none
关闭，
display:block
打开。没有中间地带，没有淡入淡出效果，没有CSS过渡

但是，还有多个其他特性可用于转换。其中:

  • 高度
  • 不透明度
  • z-index
  • 背景色
下面是一个例子：

。移动导航切换{
字号：2em；
光标：指针；
}
.移动导航{
显示：内联块；
溢出：隐藏；
宽度：0；
身高：0；
不透明度：0；
过渡：宽度1s，高度1s，不透明度0s 1s，背景色0s 2s；
}
.移动导航切换：悬停+移动导航{
宽度：150px；
高度：150像素；
不透明度：1；
背景颜色：浅绿色；
过渡：1s；
}
☰；

    

  • 项目
    • 

  • 项目
    • 

  • 项目
    •
我个人使用不透明度与可见性相结合，以实现我想要的整个元素的淡入效果。请记住操作z-index，这样你的“隐藏”对象在消失时就不会被点击。

使用
不透明度
和
z-index
，为什么需要
可见性
呢？对于一些罕见的情况，元素在没有背景的元素下和/或元素比它大，这是一种安全的选择。