Toggle Button Movement using CSS

[bpastucha]

Hello,

I am looking to create flyout menus that fly out from the left and right side of the screen. I want the toggle buttons to move with the flyout menus so that the users can select the toggle buttons in their starting position to open the menus and then select them again in their moved positions to hide the menus. I have experimented by added the toggle buttons into popups but they did not look right. I am using the code below for the popup menus. Is there coding similar to what's listed below to move the toggle buttons as well?

Thanks in advance!

[widget-id="Test_Information_Popup2"] {

top: 315px;
padding: 0px !important;
background: rgba(255, 255, 255, 0.2);
box-shadow: none;

.twx-popup {
box-shadow: none;
}
.twx-popup-container {
transition: -webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955),-webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
}
.twx-popup-container.ng-hide {
display: block !important;
-webkit-transform: translateX(-250px) translateZ(0);
transform: translateX(-250px) translateZ(0);
}
}

[widget-id="Change_History_Popup"] {

top: 315px;
padding: 0px !important;
background: rgba(255, 255, 255, 0.2);
box-shadow: none;

.twx-popup {
box-shadow: none;
}
.twx-popup-container {
transition: -webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955),-webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
}
.twx-popup-container.ng-hide {
display: block !important;
-webkit-transform: translateX(450px) translateZ(0);
transform: translateX(450px) translateZ(0);
}
}

[jmikesell]

So i just did this recently. The method i used is below. The summary is you need to have your animations in CSS classes and then uss JS to change the class value for the things you want to move. So here is an example of moving one button.

this is the JS code in your [view name].js file

//show or hide the fly out menu
$scope.menu= function (flag) {
	switch (flag) {
		case true:
			//show menu
			$scope.view.wdg['view1Button']['class'] = "view1"; //setup, 2 o'clock
			$scope.view.wdg['view2Button']['class'] = "view2"; //service, 10 o/clock
			break;
		case false:
			//hide menu
			$scope.view.wdg['view1Button']['class'] = "view1R";
			$scope.view.wdg['view2Button']['class'] = "view2R";
			break;
		default:
			console.log("menu = default");
	}
}

and then this goes in your "application" file app.scss

//
// CSS for button bottom right layout
//
.view1 {
  position: fixed;
  right:0;
  bottom: 0;
  z-index: 1;
  animation-name: view1anim;
  animation-duration: 0.5s; 
  animation-fill-mode: forwards;
}
.view1R {
  position: fixed;
  right:0;
  bottom: 0;
  z-index: 1;
  animation-name: view1Ranim;
  animation-duration: 0.5s; 
  animation-fill-mode: forwards;
}
.view2 {
  position: fixed;
  right:0;
  bottom: 0;
  z-index: 1;
  animation-name: view2anim;
  animation-duration: 0.5s; 
  animation-fill-mode: forwards;
}
.view2R {
  position: fixed;
  right:0;
  bottom: 0;
  z-index: 1;
  animation-name: view2Ranim;
  animation-duration: 0.5s; 
    animation-fill-mode: forwards;
}

@keyframes view1anim {
 from {
 opacity: 0;
 right: 0;
 bottom: 0; }
 to {
 transform: translate(0em, -86px);
 opacity: 1; }
}

@keyframes view1Ranim {
 to {
 opacity: 0;
 right: 0;
 bottom: 0; }
 from {
 transform: translate(0em, -86px);
 opacity: 1; }
}

@keyframes view2anim {
 from {
 opacity: 0;
 right: 0;
 bottom: 0; }
 to {
 transform: translate(-86px, -86px);
 opacity: 1; }
}

@keyframes view2Ranim {
 to {
 opacity: 0;
 right: 0;
 bottom: 0; }
 from {
 transform: translate(-86px, -86px);
 opacity: 1; }
}

So the classes apply some position stuff and specify what animation keyframe sequence to use. In the JS part that sets the class you can also use the to change the value of $scope.view.wdg['view1Button']['visible'] to show or hide the buttons as needed.