Unhide div снизу вверх

У меня есть div с коричневыми ветвями, как картинка, и мне нужно скрыть его, и, когда нажата кнопка, откройте снизу вверх, как будто у нее есть маска. Я не могу показать его с восходящим слайдом (например, в jquery), потому что у вершины есть листья и прочее, поэтому лучшая идея, с которой я пришел, - это показать какую-то маску.Unhide div снизу вверх

Сейчас у меня есть это:

$('.button').click(function() { 
 
     $('#branchmain').show('slide', {direction: 'down'}, 1000); 
 
    });

#branchmain { 
 
    background-image: url(http://i.imgur.com/IV2C28A.png); 
 
    background-repeat: no-repeat; 
 
    display:none; 
 
    width: 114px; 
 
    height: 307px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
<div class="button">Click me!</div> 
 
<div id="branchmain"></div>

Как я мог применить маску к DIV и отобразите его снизу вверх? Я не хочу, чтобы он двигался снизу вверх, но раскрыл его. Есть ли способ сделать это?

источник

2015-12-09 Ikzer

Это печальная ory .... Возможно, поделитесь своим кодом и превратите свою историю в вопрос ... –

Можете ли вы поделиться текущим кодом ur? –

Это может быть много способов. Слишком широкие, чтобы отвечать и основываться на мнениях. Пожалуйста, включите пример кода вашей конкретной проблемы, а также любые попытки, которые вы, возможно, попробовали. –

It отлично работает, если вы используете «слепой» эффект вместо «слайда».

Если вам нужно открыть дерево перед другим изображением, используйте слоистые div.

$('.button').click(function() { 
 
     $('#branchmain').show('blind', {direction: 'down'}, 1000); 
 
    });

#branchmain { 
 
    background-image: url(http://i.imgur.com/IV2C28A.png); 
 
    background-repeat: no-repeat; 
 
    display:none; 
 
    width: 114px; 
 
    height: 307px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
<div class="button">Click me!</div> 
 
<div id="branchmain"></div>

источник

2015-12-09 20:35:35

Я создал комбинацию SVG обтравочной маски и CSS анимации для анимации подход увядает вверх. Обратите внимание: я делал CSS бесконечно и настраивал некоторые настройки исключительно для демонстрации, я, конечно же, вам захочется сделать что-то по-другому. Но, как доказательство концепции она прекрасно работает на мой взгляд:

HTML:

<body> 
    <img class="clipped" src="http://i.imgur.com/IV2C28A.png" /> 
    <svg width="100px" height="400px"> 
    <defs> 
     <clipPath id="clipping"> 
     <rect width="100" height="300"/> 
     </clipPath> 
    </defs> 
    </svg> 
</body>

JS:

img { 
    position: absolute; 
    top: inherit; 
    left: 0; 
    } 
    img.clipped { 
    -webkit-clip-path: url(#clipping); 
    z-index: 100; 
    } 

    div { 
    position: absolute; 
    left: 410px; 
    width: 400px; 
    height: 200px; 
    } 
    div.clipped { 
    -webkit-clip-path: url(#clipping); 
    z-index: 100; 
    /* opacity: 0;*/ 
    } 
    svg rect { 
    animation: move-mask infinite running 4s; 
    } 
    @keyframes move-mask { 
    0%, 100% {transform: translateY(0)} 
    50% {transform: translateY(600px)} 
    }

Demo/Codepen здесь:

http://codepen.io/mrwigster/pen/eJNBBK

источник

2015-12-09 20:28:15

Вы можете расположить один div (с background-image) поверх другой и постепенно уменьшить max-height самой верхней div:

function witherTree() { 
 
var treeWithLeaves = document.getElementsByClassName('tree-with-leaves')[0]; 
 
var treeWithoutLeaves = document.getElementsByClassName('tree-without-leaves')[0]; 
 
var treeWithLeavesHeight = treeWithoutLeaves.clientHeight; 
 
treeWithLeaves.style.maxHeight = treeWithLeavesHeight + 'px'; 
 

 
var i = 0; 
 

 
setInterval(function(){ 
 
treeWithLeaves.style.maxHeight = (treeWithLeavesHeight - i) + 'px'; 
 
i++; 
 
},20); 
 
} 
 

 
document.getElementsByTagName('button')[0].addEventListener('click',witherTree,false);

body { 
 
margin: 25px 0 0 50px; 
 
} 
 

 
.tree-with-leaves, .tree-without-leaves { 
 
width: 125px; 
 
height: 236px; 
 
} 
 

 
.tree-with-leaves { 
 
background-image: url('http://i.stack.imgur.com/a140q.png'); 
 
} 
 

 
.tree-without-leaves { 
 
background-image: url('http://i.imgur.com/IV2C28A.png'); 
 
background-color: rgb(255,255,255); 
 
overflow: hidden; 
 
} 
 

 
button { 
 
display: block; 
 
margin: 25px; 
 
}

<div class="tree-without-leaves"> 
 
<div class="tree-with-leaves"> 
 
</div> 
 
</div> 
 

 
<button>Click Me</button>

источник

2015-12-10 18:15:50 Rounin

Unhide div снизу вверх

ответ

Смежные вопросы