How to make this transition effect using CSS?

Asked

Viewed 1,642 times

2

How to make a transition with pure CSS, and in the final transition layout I will have 2 boxes on the left side.

The transition:

When loading the page, you will only have one box with evaluation information. When I select a snippet of text, this box goes down and above it, there should appear a box that is hidden on the left of the page, this effect should occur when I select a snippet of text the box that will appear with a fadein effect (all effects, both to go down and to appear, must be synchronized), note that this I have the example of the effect in the link below (with javascript).

Fiddle of the example

I would like to do the same effect using only CSS, being that I am using ng-Hide / ng-show from Angularjs.

It is possible to do the same effect?

Here follows SCSS that tried and did not get very good...

  .display-mark {
          opacity:0 ;
          transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -ms-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
          //transform: translateX(0%);
          //-webkit-transform: translateX(0%);
          //-ms-transform: translateX(0%);
          //-moz-transform: translateX(0%);
          //-o-transform: translateX(0%);
          display: block;
          position: relative$i;
          animation: all 0.3s ease-in;
          -webkit-animation: all 0.3s ease-in;
          //&.anime-open-vertical,
          //&.anime-open-vertical-add {
          //  display: block;
          //  position: relative;
          //  animation: moveIn 0.4s ease-in;
          //  -webkit-animation: moveIn 0.4s ease-in;
          //}
          &.ng-animate.anime-close-vertical {
            display: block$i;
            animation: moveOut 0.4s ease-out;
            -webkit-animation: moveOut 0.4s ease-out;
          }
          &.anime-open-vertical {
            opacity:1;
            transform: translateX(0%);
            -webkit-transform: translateX(0%);
            -ms-transform: translateX(0%);
            -moz-transform: translateX(0%);
            -o-transform: translateX(0%);
            display: block$i;
          }
          &.anime-open-vertical-add,
          &.ng-animate.anime-open-vertical {
            transform: translateX(0%);
            -webkit-transform: translateX(0%);
            -ms-transform: translateX(0%);
            -moz-transform: translateX(0%);
            -o-transform: translateX(0%);
            opacity:1;
            display: block$i;
            animation: moveIn 0.4s ease-in;
            -webkit-animation: moveIn 0.4s ease-in;
          }
          &.ng-animate.ng-hide-add {
            display: none$i;
          }
          &.ng-animate.ng-hide-remove {
            display: block$i;
          }
        }
        .anime-vertical{
          //display: none$i;
          position: relative;
          height: 0;
          animation: all 0.5s ease-in;
          -webkit-animation: all 0.5s ease-in;
        }
        .display-mark.ng-animate.ng-hide {
          opacity:0;
          transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -ms-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
           display: block$i;

        }



        //.display-mark.animate-show-hide.ng-hide {
        //    opacity:0;
        //    transform: translateX(104%);
        //    -webkit-transform: translateX(104%);
        //    -ms-transform: translateX(104%);
        //    -moz-transform: translateX(104%);
        //    -o-transform: translateX(104%);
        //    display: block$i;
        //    position: relative$i;
        //}

        .anime-vertical {
          &.anime-down {
            display: block;
            position: relative;
            animation: moveDown 0.4s ease-in;
            -webkit-animation: moveDown 0.4s ease-in;
          }
          &.anime-up {
            display: block;
            position: relative;
            animation: moveUp 0.4s ease-in;
            -webkit-animation: moveUp 0.4s ease-in;
          }
        }

@keyframes moveIn {
  0% { transform: translateX(100%);  opacity: 0; position: static$i }
  50% { transform: translateX(50%);  opacity: 1; position: static$i }
  100% { transform: translateX(0%);  opacity: 1;  position: static$i }
}

@-webkit-keyframes moveIn {
  0% { transform: translateX(100%); opacity: 0; position: static$i }
  50% { transform: translateX(50%);  opacity: 1; position: static$i }
  100% { -webkit-transform: translateX(0%); opacity: 1; position: static$i }
}

@keyframes moveOut {
  0% { transform: translateX(0%); opacity: 1;position: static$i  }
  50% { transform: translateX(50%);  opacity: 1; position: static$i }
  100% { transform: translateX(100%); opacity: 0; position: static$i  }
}

@-webkit-keyframes moveOut {
  0% { -webkit-transform: translateX(0%);  opacity: 1; position: static$i  }
  50% { transform: translateX(50%);  opacity: 1; position: static$i }
  100% { -webkit-transform: translateX(100%);  opacity: 0; position: static$i  }
}

/**

 */
@keyframes moveUp {
  0% { height: 310px; }
  100% { height: 0px; }
}

@-webkit-keyframes moveUp {
  0% { height: 310px; }
  100% { height: 0px; }
}

@keyframes moveDown {
  0% { height: 0px; }
  100% { height: 310px; }

}

@-webkit-keyframes moveDown {
  0% { height: 0px; }
  100% { height: 310px; }
}
            <div id="scroller_content" class="scroll-forms" ng-class="{'no-overflow': !variavel_true_false}">

BOX 1:

<div id="form_mark_box" ng-show="variavel_true_false" class="display-mark" ng-class="{'anime-open-vertical':(variavel_true_false),'anime-close-vertical':(!variavel_true_false)}"><!-- BOX 1 -->nonono nonono</div>

BOX 2:

<div id="animate-down-element" class="anime-vertical" ng-class="{'anime-down':(variavel_true_false), 'anime-up':(!variavel_true_false && data_review.animeUp)}"></div>
                    <div  id="form_prod_textual" ng-style="data_review.reposition_form_producao_textual" class="form-rule-actions form-producao-textual">
                        <form class="form-review">
<!-- BOX 2 --> nonono nonono
</form>
</div>

Here is a video that shows the problem.

css angularjs scss

1 answer

5

Ivan yes it is possible to solve the problem only with CSS, but you have to have a HTML + CSS Structure that is coherent.

I mean, you’re gonna need rules like :focus + div or :target ~ div etc, so for some CSS rules to be applied the HTML structure has to "collaborate" with the methodology of doing everything with CSS.

inserir a descrição da imagem aqui

Here’s a practical example. I did it using :target, but you can do with label for IDchebox. (do not recommend to do with :focus, pq when you click qq place of the screen the element will close itself)

Note that in the example I have a text inside a link, and when that link is clicked makes a :target. The element when receiving this target activates the animation, and when "loses" the Arge on the link close the animation backward. For the animation was used transition and transition-delay, so it’s easy to synchronize for one to happen only after the other.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.container {
	position: relative;
	overflow: hidden;
	height: 100%;
}
.box-fecha,
.box-abre {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: green;
	top: 0;
}
.box-fecha {
	right: 0;
	transition: all 500ms;
}
.box-abre {
	background-color: red;
	right: -100px;
	transition: all 500ms;
	transition-delay: 500ms;
}
#fecha:target ~ .box-fecha{
	top: 100px;
	transition-delay: 0ms;
}
#fecha:target ~ .box-abre{
	right: 0px;
	transition-delay: 500ms;
}
#abre:target ~ .box-fecha{
	top: 0px;
	transition-delay: 500ms;

}
#abre:target ~ .box-abre{
	right: -100px;
	transition-delay: 0ms;

}

#abre, 
#fecha {
	display: none;
}

.texto {
	display: inline-block;
	width: 200px;
	border: 1px solid #000;
	text-decoration: none;
	color: initial;
}

	
<div class="container">
  <a href="#fecha" class="texto">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad veritatis necessitatibus facilis distinctio? Neque rem saepe mollitia error, minus ex voluptas aspernatur ratione eius totam illo, nesciunt tempore veniam qui.
  </a>
  <div id="fecha">fecha</div>
  <div id="abre">abre</div>
  <div class="box-fecha" id="teste">
    <a href="#abre">fecha</a>
  </div>
  <div class="box-abre"></div>
</div>

  • So the effect is similar to this, but I can’t use target, I can pass a class in ng-class during the event... because while the show/show event occurs, it also takes some classes, ng-Animate, ng-Hide-add, ng-Hide-remove...

  • @Ivanferrer then just where is #fecha:target ~ .box-fecha or #abre:target ~ .box-abre you put class names, without needing the :target guy #fecha.ng-animate ~ .box-abre or #abre.ng-animate ~ .box-fecha. This is just an example. But what you have to understand is transition and the transition-delay it is with them that you will synchronize the animation. And the concept of the selector ~ which means that when a #ID element above receives the ng-animate element . class below will receive animation

  • I put a mother class, to trigger the target type events, the exit event works, but not in the way it should, but even so the biggest problem is that I am working with elements that have varying heights, because they are with position: relative or Static, in your example you used position: Absolute, which limits the action...

  • @Ivanferrer this example would be for an "ideal" situation really. But it’s the concept that matters, when I did the answer I figured you’d need to adapt something. If you want to open another question and put what you have of code at the moment and what is the problem you are having there with details. Or if you prefer to take this Answer code and put a Question explaining that this model works well with fixed values, but you need it to work with variable values because you don’t know how big the red block on top will be etc. This makes it easier for me or someone else to help you

  • I posted a video to expose my problem. Note that when I cancel, instead of the box go up smooth, it goes straight up... in case, this happens because it is not an absolute element, but when I put it as absolute, it goes up smooth, however, does not wait for the top element to disappear, and already begins to rise...

  • @Ivanferrer tries so, after the input animation has already happened and the elements are in place, in the element you want to delay the animation you put a 500ms Transition-delay. This should solve. I did another example here, it is even simpler and does not use position:Bsolute. I made it with checkbox just to finish the model faster, but sometimes it can give you a light tb pq it does not use fixed height values. https://codepen.io/hugocsl/pen/VOGBvm

  • This last example came closer, however, it comes from the right, I tried to do the same on the left, and it didn’t work...

  • @Ivanferrer if that’s the case opens another question with the code you have at the moment. As I told you the purpose of this answer was to give you a practical example of how to apply the technique, and not to do exactly or replicate the problem you have there. The intention was to pass the knowledge to you to do the work. If you have another question, post what you have at the moment, that I or another member try to help you.

  • Note that the form I used with click does not work, the example: https://jsfiddle.net/ivanferrer/3t4v29Lm/

Show 4 more comments

Browser other questions tagged css angularjs scss

You are not signed in. Login or sign up in order to post.