使用CSS禁用动画效果

我正在为我的网站提供滑出式菜单。使用CSS禁用动画效果

当单击菜单图标时，我想禁用菜单向上动画的方式并将其设置为静态。我该怎么做呢？

我相信答案是在我的CSS，但试&错误至今未能：

html, 
body, 
.container, 
.content-wrap { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
} 

.container { 
    background: #373a47; 
} 

.menu-wrap a { 
    color: #b8b7ad; 
} 

.menu-wrap a:hover, 
.menu-wrap a:focus { 
    color: #c94e50; 
} 

.content-wrap { 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

.content { 
    position: relative; 
    background: #b4bad2; 
} 

.content::before { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.3); 
    content: ''; 
    opacity: 0; 
    -webkit-transform: translate3d(100%,0,0); 
    transform: translate3d(100%,0,0); 
    -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; 
    transition: opacity 0.4s, transform 0s 0.4s; 
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
} 

/* Menu Button */ 
.menu-button { 
    position: fixed; 
    z-index: 1000; 
    margin: 1em; 
    padding: 0; 
    width: 2.5em; 
    height: 2.25em; 
    border: none; 
    text-indent: 2.5em; 
    font-size: 1.5em; 
    color: transparent; 
    background: transparent; 
} 

.menu-button::before { 
    position: absolute; 
    top: 0.5em; 
    right: 0.5em; 
    bottom: 0.5em; 
    left: 0.5em; 
    background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 
    content: ''; 
} 

.menu-button:hover { 
    opacity: 0.6; 
} 

/* Close Button */ 
.close-button { 
    width: 1em; 
    height: 1em; 
    position: absolute; 
    right: 1em; 
    top: 1em; 
    overflow: hidden; 
    text-indent: 1em; 
    font-size: 0.75em; 
    border: none; 
    background: transparent; 
    color: transparent; 
} 

.close-button::before, 
.close-button::after { 
    content: ''; 
    position: absolute; 
    width: 3px; 
    height: 100%; 
    top: 0; 
    left: 50%; 
    background: #bdc3c7; 
} 

.close-button::before { 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

.close-button::after { 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

/* Menu */ 
.menu-wrap { 
    position: absolute; 
    z-index: 1001; 
    width: 300px; 
    height: 100%; 
    background: #373a47; 
    padding: 2.5em 1.5em 0; 
    font-size: 1.15em; 
    -webkit-transform: translate3d(-320px,0,0); 
    transform: translate3d(-320px,0,0); 
    -webkit-transition: -webkit-transform 0.4s; 
    transition: transform 0.4s; 
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
} 

.menu, 
.icon-list { 
    height: 100%; 
} 

.icon-list { 
    -webkit-transform: translate3d(0,100%,0); 
    transform: translate3d(0,100%,0); 
} 

.icon-list a { 
    display: block; 
    padding: 0.8em; 
    -webkit-transform: translate3d(0,500px,0); 
    transform: translate3d(0,500px,0); 
} 

.icon-list, 
.icon-list a { 
    -webkit-transition: -webkit-transform 0s 0.4s; 
    transition: transform 0s 0.4s; 
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
} 

.icon-list a:nth-child(2) { 
    -webkit-transform: translate3d(0,1000px,0); 
    transform: translate3d(0,1000px,0); 
} 

.icon-list a:nth-child(3) { 
    -webkit-transform: translate3d(0,1500px,0); 
    transform: translate3d(0,1500px,0); 
} 

.icon-list a:nth-child(4) { 
    -webkit-transform: translate3d(0,2000px,0); 
    transform: translate3d(0,2000px,0); 
} 

.icon-list a:nth-child(5) { 
    -webkit-transform: translate3d(0,2500px,0); 
    transform: translate3d(0,2500px,0); 
} 

.icon-list a:nth-child(6) { 
    -webkit-transform: translate3d(0,3000px,0); 
    transform: translate3d(0,3000px,0); 
} 

.icon-list a span { 
    margin-left: 10px; 
    font-weight: 700; 
} 

/* Shown menu */ 
.show-menu .menu-wrap { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 0.8s; 
    transition: transform 0.8s; 
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
} 

.show-menu .icon-list, 
.show-menu .icon-list a { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 0.8s; 
    transition: transform 0.8s; 
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
} 

.show-menu .icon-list a { 
    -webkit-transition-duration: 0.9s; 
    transition-duration: 0.9s; 
} 

.show-menu .content::before { 
    opacity: 1; 
    -webkit-transition: opacity 0.8s; 
    transition: opacity 0.8s; 
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
}

来源

2015-03-13 michaelmcgurk

在'.show菜单.icon列表a'去掉转换。 – anpsmn 2015-03-13 08:05:17

我会尝试刚刚更新小提琴。谢谢。 – michaelmcgurk 2015-03-13 08:05:49

删除转换并添加'transition：none'。这里是[小提琴]（http://jsfiddle.net/3w539Lct/2/） – anpsmn 2015-03-13 08:09:10

删除这些转变：

.show-menu .icon-list a { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0);/* 
    -webkit-transition: -webkit-transform 0.8s; 
    transition: transform 0.8s; 
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);*/ 
} 

.show-menu .icon-list a { /* 
    -webkit-transition-duration: 0.9s; 
    transition-duration: 0.9s; */ 
}

来源

2015-03-13 08:09:17 chiliNUT

由于菜单项通过.icon-list类引用，只需删除相关样式：

.icon-list { 
 
\t -webkit-transform: translate3d(0,100%,0); 
 
\t transform: translate3d(0,100%,0); 
 
} 
 

 
.icon-list a { 
 
\t display: block; 
 
\t padding: 0.8em; 
 
\t -webkit-transform: translate3d(0,500px,0); 
 
\t transform: translate3d(0,500px,0); 
 
} 
 

 
.icon-list, 
 
.icon-list a { 
 
\t -webkit-transition: -webkit-transform 0s 0.4s; 
 
\t transition: transform 0s 0.4s; 
 
\t -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
 
\t transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
 
} 
 

 
.icon-list a:nth-child(2) { 
 
\t -webkit-transform: translate3d(0,1000px,0); 
 
\t transform: translate3d(0,1000px,0); 
 
} 
 

 
.icon-list a:nth-child(3) { 
 
\t -webkit-transform: translate3d(0,1500px,0); 
 
\t transform: translate3d(0,1500px,0); 
 
} 
 

 
.icon-list a:nth-child(4) { 
 
\t -webkit-transform: translate3d(0,2000px,0); 
 
\t transform: translate3d(0,2000px,0); 
 
} 
 

 
.icon-list a:nth-child(5) { 
 
\t -webkit-transform: translate3d(0,2500px,0); 
 
\t transform: translate3d(0,2500px,0); 
 
} 
 

 
.icon-list a:nth-child(6) { 
 
\t -webkit-transform: translate3d(0,3000px,0); 
 
\t transform: translate3d(0,3000px,0); 
 
}

你可能想保留下面的样式，使菜单位置不会受到影响：

.icon-list a { 
 
    \t display: block; 
 
    \t padding: 0.8em; 
 
}

来源

2015-03-13 08:16:04 zumek

使用CSS禁用动画效果

回答

相关问题